How do i play H264 video?

Question

Hi,

I have received the following video file from a camera (from security camera) http://dl.dropbox.com/u/1369478/tmw/recording.264

How can i view the content? Based on extension i think that is a H264 file. Is there a way to play this on the browser with HTML5?

Regards

Answer 1

Hmm.. From the looks of it it doesn't look like a H264 file..

Running it through MediaInfo, I got this:

Video
Format : AVC
Format/Info : Advanced Video Codec
Format profile : [email protected]
Format settings, CABAC : No
Format settings, ReFrames : 1 frame
Width : 352 pixels
Height : 288 pixels
Display aspect ratio : 1.222
Resolution : 24 bits
Colorimetry : 4:2:0
Scan type : Progressive

Apart from it all, you have to know that not all browsers support H264 in the <video> element.. Some of them decided to hold on to ogg, so it's not really going to be available everywhere :S

Here's a table that shows that H264 video os only supported by Chrome and Safari: http://www.findmebyip.com/litmus#html5-video-codecs

In any case, if you do get a video file, and you want to embed it in a browser, and you know that you'll access it from a compatible browser (or if you get H264 AND ogg versions), you can use this:

<video src="http://link/to/video/file" controls="controls" width="500"></video>

Or if you have multiple formats:

<video controls="controls" width="500">
    <!-- if Firefox -->
    <source src="video.ogg" type="video/ogg" />
    <!-- if Safari/Chrome-->
    <source src="video.mp4" type="video/mp4" />
</video>

Check out this link for some more examples, and how to add flash / flat image fallback for browsers that don't support it http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-html-5-video-with-a-fallback-to-flash/

UPD: As I understood, the file that you hosted up there is an example, not the actual file that you want to have in your page.. The file you have there has a single frame, so it might be a jpeg image, and it would make no difference :P

If you DO have an actual video file with the same format, you might try to inject it in the page using the snippets above. If the browser coughs it up, and doesn't want to play it (remember to check it with Chrome or Safari), then you can just convert the file using one of the free encoders on the net. For example, I've been using the free H.264 encoder to convert my video files to H.264 :)

Good luck!

UPD2: I actually took and encoded the file... The file size dropped from 1.766MB to 34KB. It's the same video, 1 frame, same size... but the 1 frame in the video is looped for ~30 seconds :) So I see a long 30 sec background there.. I guess you really SHOULD encode the file, even if it's in H.264 already, because the computer will encode video files a LOT better, and you'll bet (almost) the same picture quality, with a much smaller file size.

Answer 2

If this still isn't working, taking the code from what Artiom posted above, you may want to include the codec in the type attribute, e.g.:

<video autoplay controls width="512" height="300">
  <source src='myVideo.theora.ogg' type='video/ogg; codecs="theora, vorbis"'>
  <source src='myVideo.mp4' type='video/mp4; codecs="mp4v.20.8, samr"'>
</video>

For more info see: html5 laboratory - using the video element

Answer 3

To play it I suggest the very good VLC Player which can (like most good video players) play direct from a URL.

PS: It seems this is the kind of question to put on http://superuser.com

Answer 4

Options,

• VLC PLayer (www.videolan.org) --> plays all except 3gp audio.
• K-Lite Mega Codec Pack -->This contains almost all codecs for video/audio.

Hope this helps.

If not, please let us know so that we can find another solution. But these 2 things i am using since last 4 to 5 years. And believe me it plats anything you have.

thanks.