Saturday, August 4, 2012

HTML5 Video

A very beautiful yet frustrating improvement in HTML5 is the browser support of native video without any third party plugin with the use of the video tag.

<video controls="controls" width="352" height="288" poster="poster.jpg">
     <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
     <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
     <track kind="captions" src="captions.vtt" srclang=en label=English />
</video>

The controls tells the browser to use its default controls with the video. The poster is the image that should be shown while the video is being downloaded or until the user pushes the play button. I include two different source files with the video because not all browser play nicely together. Browsers like Firefox require the open video file type ogv while browser like IE 9 and Safari want the mp4 file type. The track is used to display text for captions/subtitles on the video.

There are a few problems that can keep your video from playing and the biggest ones I have run into are incorrect encoding and incorrect MIME type. Internet Explorer is the most unforgiving in both of these regards. The video needs to be encoded with H.264. I like to use ffmpeg to do this with the following command:

ffmpeg -i input.mpeg -s 352x288 -vcodec -libx264 -preset slow output.mp4
Here are two samples for webm and ogv file types.
ffmpeg -i input.mpeg -vcodec libvpx -acodec libvorbis -f webm output.webm

ffmpeg -i input.mpeg -vcodec libtheora -acodec libvorbis output.ogv

Another great utility is Miro.

Your server needs to be set up to send the correct MIME type to the browser. In apache you need to add the following to the httpd.conf file. Remember to reboot the server after doing so.

AddType video/mp4 .mp4 .m4v
AddType video/ogg .ogv
AddType video/webm .webm

I hope this is enough to get you started in the right direction. If you still have questions here are some good links to check out ffmpeg commands, trouble shooting IE9. Good luck!

No comments:

Post a Comment