Encode videos for the Web and HTML5
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