HTML5 Video Encoding Using ffmpeg

HTML5 video is a new technology that simplifies the process of displaying web video on your website. Flash is still the main player on the web but HTML5 video is starting to gain prominence. The way to display video is via some very simple HTML code:

<video id="video" controls="true" preload="none">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">	
This message displays when there is no HTML5 video support.
</video>

As if it was as simple as that. The different <sources>'s are URL locations to differently encoded versions of the same video. These are needed because different browsers have different available video decoders. Check here for current support.

Encoding in h264 and webm will cover the vast majority of browsers and here's how you do it with ffmpeg (you will need the libx264 & libfaac codecs for h264 video, and libvpx & libvorbis for webm):

h264 (mp4)	ffmpeg -i video.avi -c:v libx264 -c:a libfaac -b:v 500k -b:a 128k -profile:v baseline video.mp4
webm	ffmpeg -i video.avi -c:v libvpx -c:a libvorbis -b:v 500k -b:a 128k video.webm

Nuances:

• Internet Explorer 9 plays h264 but was only happy when I set the audio bit rate to 128k. 64k didn't work.
• With some browsers your web server must send back the headers Content-Type: video/mp4 for h264 and Content-Type: video/webm for webm.
• Safari on Windows requires you to install QuickTime to play h264.