ffmepg and html5 Video – Avoiding Flash Technology

July 31st, 2011

As indicated by Saimon, a lot of people have wondered how they could use ffmpeg to produce videos that can leverage the use of the html5 tag <video>. The objective is to avoid the use of the Flash technology.

In order to achieve this objective, you need to run the following command to get a WebM (VP8/Vorbis) video. An encoding format supported by Firefox 4+, Chrome 6+ and Opera 10.6+:

ffmpeg -i input.avi -vcodec libvpx -acodec libvorbis -threads 4 output.webm

and to produce an mp4 (h264/mp3) for Safari 3+ and Internet Eplorer 9+:

ffmpeg -i input.avi -vcodec libx264 -acodec libmp3lame -preset slow -crf 22 -threads 0 output.mp4

then use the following syntax to write an html5 page that can run on all platforms:

<video width="480" height="640" controls>
  <source src="videos/dscn0470.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src="videos/dscn0470.webm" type='video/webm; codecs="vp8, vorbis"'>

Adam Behnke

Adam is a mobile/web developer for Accella who has been developing telecom and web applications since the mid-90's, before the dot-com bust. With a heavy telecom background, Adam can speak fluently in 3GPP, ASN.1, SS7, and SIGTRAN as well.

Leave a Reply