Documentation

A <video> element can link to multiple video files encoded in different formats, and the browser will choose the first video it can actually play.

This table summarizes the current natively supported video formats on the latest HTML5 browsers:

Video container format / codec	Native HTML5 support
MP4 / H.264	Chrome, IE9-10, Safari
WebM / VP8	Chrome, Firefox, Opera
Ogg / Theora	Chrome, Firefox, Opera

(See our supported platforms page for more details about this)

As you can see, there is no single video format that works in all HTML5 browsers. If you want your video to be visualized in the maximum number of HTML5 browsers without the use of Flash, you need to encode your video in multiple formats, as explained below.
However, if you really just want to encode your video in one format and still be sure it’ll be visible in all browsers, you can encode it in H.264 and SublimeVideo will automatically switch to Flash mode when needed (i.e. on HTML5 browsers that cannot decode H.264 natively, and on legacy browsers that do not support HTML5 at all).

Important note:

Once you’re finished encoding your videos and ready to upload them to your web server, please remember to double-check that the MIME types are properly configured in the server, especially if you’re uploading Ogg and WebM videos.

Encoding MP4 / H.264 videos

We recommend using HandBrake to encode your H.264 videos. For further instructions, please refer to Mark Pilgrim’s Dive into HTML5 guide: Encoding H.264 Video With HandBrake

Encoding WebM / VP8 videos

We recommend using FFmpeg to encode your WebM videos.

Installing FFmpeg

Windows and Linux

Download the installer from the FFmpeg Download page.

Mac OSX

We recommend installing using Homebrew with the following command line:

brew install ffmpeg --with-libvpx --with-libvorbis

Please note that if you already installed FFmpeg with another command line, you will first need to run brew uninstall ffmpeg.

Using FFmpeg

The following are the ffmpeg command lines we recommend you use.

Encode a 640×360 (360p) video with a 2-pass encoding

ffmpeg -i source.mp4 -pass 1 -codec:v libvpx -b:v 650k -codec:a libvorbis \
  -b:a 100k -s 640x360 -f webm -y /dev/null
ffmpeg -i source.mp4 -pass 2 -codec:v libvpx -b:v 650k -codec:a libvorbis \
  -b:a 100k -s 640x360 -y output.webm

Encode a 1280×720 (720p) video with a 2-pass encoding

ffmpeg -i source.mp4 -pass 1 -codec:v libvpx -b:v 2000k -codec:a libvorbis \
  -b:a 100k -s 1280x720 -f webm -y /dev/null
ffmpeg -i source.mp4 -pass 2 -codec:v libvpx -b:v 2000k -codec:a libvorbis \
  -b:a 100k -s 1280x720 -y output.webm

Note:

• Replace source.mp4 with the actual path to your original .mov file.
• Replace output.webm with the actual paths to the .webm files you want to create.

Additional resources

For further instructions, please refer to Mark Pilgrim’s Dive into HTML5 guide: Encoding WebM Video With FFmpeg

Encoding Ogg / Theora videos

Guide from Mark Pilgrim’s Dive into HTML5 book: Encoding Ogg Video With Firefogg