Using HTML5 video is a lot less painful nowadays than it was years ago. Most of the browsers which do not support video reached their EOL, so we only have to take care about choosing the right container(s) and codec(s), and we have our homework done.

The bad news: at the time of writing this article there is not a single container-codec combination that works in all (HTML5-supporting) browsers. The good news: with a combination of two formats (and by providing these two kinds of video formats as <source> tags inside the <video> element), we can cover almost every browser.

I don’t want to (and I won’t) repeat here anything that’s already explained by someone else, much more professionally than I would be able to. So if you’re interested in details, please read Mark Pilgrim’s excellent article “Video on the Web” about the background of HTML5 video support.

If you only want to know which formats should be provided for the best coverage, here they are:

  • MP4 container with h.264 video and aac or mp3) audio channel
  • WebM container with VP8 (VP9) video and oog audio.

How can we convert our sources to the formats above with FFmpeg

  • MP4 container with h.264 video and aac audio:

    

    1
2
3
4
5
6
7
8

    		

    ffmpeg -i video-input.mov \
  -vf scale=-2:480:flags=lanczos \
  -vcodec h264 \
  -profile:v baseline \
  -level 3.1 \
  -preset veryslow \
  -acodec aac \
  video-output.mp4

  • WebM container with VP8 video and oog audio:

    

    1
2
3
4
5
6
7

    		

    ffmpeg -i video-input.mov \
  -vf scale=-2:480:flags=lanczos \
  -c:v libvpx \
  -crf 10 \
  -b:v 1M \
  -c:a libvorbis \
  video-output.webm

Sources (or in other words, reading list):