Media & Entertainment Industry Trends, Technology and Research

#2 Technical Series : How to convert video for HTML5 using FFMPEG

Posted In New Media, Technical - By Nitin Narang on Sunday, August 3rd, 2014 With 1 Comment

HTML5 video FormatsHTML5 introduction of <video> element has made embedding video into a web page a trivial task. The plugin confusions,  video codec availability, container support etc. are far less with browser owning the responsibility to  decode and display video using the underlying multimedia framework . While the support for HTML5 video element is gaining popularity across browsers,  three important video types which have gained widespread support in modern browsers are MP4, WebM, and Ogg.  While using HTML5 video, it is advised to use multiple tags within video element with a different video source,  the browser will automatically scan the list and pick the first which it can play.

Using FFMPEG to create HTML5 videos

FFmpeg is an extremely popular multimedia framework which can be used to decode, encode, transcode, mux and demux media files. One can download ffmpeg source or pre-built binaries from here . Ensure that available ffmpeg binary is compiled with VP8 (vorbis) support. Execute ffmpeg command to find its built option and available support of libtheora and libvorbis as highlighted below.

[XXX]$ ffmpeg
ffmpeg version N-63893-gc69defd Copyright (c) 2000-2014 the FFmpeg developers
built on Jul 16 2014 05:13:25 with gcc 4.6 (Debian 4.6.3-1)
configuration: –prefix=/root/ffmpeg-static/32bit –arch=x86_32 –extra-cflags=’-m32 -I/root/ffmpeg-static/32bit/include -static’ –extra-ldflags=’-m32 -L/root/ffmpeg-static/32bit/lib -static’ –extra-libs=’-lxml2 -lexpat -lfreetype’ –enable-static –disable-shared –disable-ffserver –disable-doc –enable-bzlib –enable-zlib –enable-postproc –enable-runtime-cpudetect –enable-libx264 –enable-gpl –enable-libtheora –enable-libvorbis –enable-libmp3lame –enable-gray –enable-libass –enable-libfreetype –enable-libopenjpeg –enable-libspeex –enable-libvo-aacenc –enable-libvo-amrwbenc –enable-version3 enable-libvpx

FFMPEG command to convert mov to mp4

Since mov container is compatible with mp4, the conversion only needs to copy the  video and audio data to the mp4 output container without recoding the raw bit streams

$ ffmpeg -i -vcodec copy -acodec copy Outputvideo.mp4

FFMPEG command to convert  mov to ogg

$ ffmpeg -i -acodec libvorbis -vcodec libtheora -ac 2 -ab 96k -ar 44100 -b 819200 -s 1080×720 Outputvideo.ogv

FFMPEG command to convert  mp4 to webm

$ ffmpeg -i sourcevideo.mp4 -vcodec libvpx -acodec libvorbis -aq 5 -ac 2 -qmax 25 -b 614400 -s 1280×720 Outputvideo.webm

 Video Containers and Formats

WebM : WebM is a royalty-free, open source format with video compressed with the VP8 video codec and audio with the Vorbis audio codec. The WebM file structure is based on the Matroska container.  It is supported natively in the latest versions of Chrome, Mozilla Firefox, and Opera.

MP4: MP4 or MPEG-4 Part 14 is an instance of the more general ISO/IEC 14496-12:2004 format which is directly based upon the QuickTime File Format (.mov).It uses the H.264 codec for video and the AAC codec for audio and uses an.mp4 or .m4v extension.

OGG: Ogg video (Theora) , and Ogg audio (Vorbis) is based on an open standard, open source–friendly format. Ogg has extensive browser support with Firefox 3.5, Chrome 4, and Opera 10.5 supporting it natively.

Read here to setup your HTML5 Video player

About - Digital Media Technology Consultant. I have passion for TV technology, digital convergence and changing face of Media and Entertainment industry.

  • flowereyess

    I use Avdshare VideoGo to add
    ogv to MP4,
    it also helps to add subtitles to other video like AVI, MKV, WMV, MOV, VOB and