home / blog

HTML5 video with FFmpeg

Firstly get yourself a fully functional installation of ffmpeg.

# ubuntu
sudo apt-get install ffmpeg
# MacOS X
sudo port install ffmpeg +nonfree

Next, unbelievably, we need to encode into four different formats.

Format What is it? Video codec Audio codec Container Users (simplified!)
MP4 Aka MPEG4 part 10. H264 AAC MPEG4 IE9, Safari, iPads, iPhones
WebM Google’s offering, aka VP8. VP8 Vorbis VP8 Firefox, Chrome
OGG An open source codec Theora Vorbis OGG Firefox, Chrome
Flash video Good old flash, although not strictly required, we’ll use this a fallback for browsers lacking HTML5 support. FLV (aka VP6) MP3 FLV with meta data Any browser with Flash

So here is what I used to take some MythTV recording, downscale and de-interlace with 2-pass encoding…

for p in 1 2; do
  ffmpeg -i input.mpg -vf yadif,scale=640:360 -pass $p \
         -ab 128k -vcodec libx264 -vpre baseline -vb 1000k out.mp4
done;
for p in 1 2; do
  ffmpeg -i input.mpg -vf yadif,scale=640:360 -ar 44100 -pass $p \
         -ab 128k -vcodec libvpx -vb 1000k out.webm
done;
for p in 1 2; do
  ffmpeg -i input.mpg -vf yadif,scale=640:360 -pass $p \
         -ab 128k -vcodec libtheora -acodec libvorbis -vb 1000k out.ogv
done;
for p in 1 2; do
  ffmpeg -i input.mpg -vf yadif,scale=640:360 -ar 44100 -ab 128k -pass $p \
         -vcodec flv -vb 1000k calendar.flv
done;

Now we come to usage, we list the available files and codec information. We also include a flash fallback using the popular flash video player “flowplayer“. This will only be shown if the browser does not support HTML5.

<video controls="controls" preload="auto" style="width:640;height:360" >

    <source src="/resources/foo.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
    <source src="/resources/foo.webm" type='video/webm; codecs="vp8.0, vorbis"'/>
    <source src="/resources/foo.ogv" type='video/ogg; codecs="theora, vorbis"'/>

    <object type="application/x-shockwave-flash" data="/js/flowplayer-3.2.11.swf" style="width:640;height:360" width="640" height="360">
       <param name="movie" value="/js/flowplayer-3.2.11.swf" />
       <param name="allowFullScreen" value="true" />
       <param name="wmode" value="transparent" />
       <param name="flashVars" value="config={'playlist':[{'url':'/resources/foo.flv','autoPlay':true}]}" />
       <a href="/resources/foo.flv">No video playback capabilities, please download the video below"</a>
    </object>

</video>
This entry was posted in geek. Bookmark the permalink.

Leave a Reply

Your email address will not be published.