HTML5 Video Encoding Decoded

Posted 12 years, 11 months ago in Tutorials

If you've spent some time on my homepage you may have found my intro video. It should be playing nicely with your browser and the best part at this point no Flash is involved. Although I wouldn't mind a flash fallback but that just doesn't seem to work.

Anyway, trying to get that video to work on mobile was quite a pain so I thought I'd write this tutorial on how to do it.

First, you will need to have your video in the correct resolution. Originally I tried 1920x1080 and it didn't play in any of my iOS devices. What I found works is 855x480, this will play in modern smartphones and still look good on a desktop without taking up much bandwidth or time to load. For instance the average video size for the various versions of my intro movie is about 1.3mb for a 38 second video.

Second, with HTML5 different browsers play different encoded file types. Chrome VP8 Encoding .webm files. Firefox Theora Ogg files either .ogv or .ogg, or H.264 Encoded videos .mp4, .m4v, and .m4a Safari (including mobile) H.264 Encoded Videos .mp4, .m4v, and .m4a Internet Explorer H.264 Encoded Videos .mp4, .m4v, and .m4a

Before you start encoding you want to have your video in a high quality, equal or higher resolution, generic container format. I worked with an Apple ProRes HQ codec and .mov movie type.

There's 3 tools you really need and for the most part they're easy to setup.

  • FFMpeg - Really the only tool you need.
  • HandBrake - Another Open Source video encoder but comes with few options and haven't found much on adding more in.
  • Miro Encoder - A Open Source video encoder but I've had bad luck with their VP8 encoder

The tool I recommend the most is FFMpeg though it is the more difficult of the tools to use since it's command line based.

Installing FFMpeg

To install ffmpeg the easiest way is to install homebrew if you're on OS X. If you're on unix you can use your package manager to install ffmpeg as you normally would.

After you install homebrew open your Terminal.app located in /Applications/Utilities and run the following command:

brew install ffmpeg

This will download the ffmpeg source code files, configure it, and build it for you.

Now you should be able to run the following command:

ffmpeg

If it installed correctly you'll get an error about not giving it proper information. If it says command not found, try closing and restarting terminal. If it still says command not found try installing again or doing it manually with the source.

These are two bash shell scripts I created for converting a HD 480p or greater video into HD 480p Google webm and firefox's theora/ogv.

#!/bin/bash

echo -n "Enter the source file: "
read input
echo -n "Enter the output file: "
read output

ffmpeg -i $input  -vcodec libvpx -acodec libvorbis -s hd480 -r 29.97 $output

You can download it or fork it from the source on github.

Here's the one for theora/ogv:

#!/bin/bash

echo -n "Enter the source file: "
read input
echo -n "Enter the output file: "
read output

ffmpeg -i $input -acodec libvorbis -ac 2 -ab 96k -ar 44100 -b 345k -s hd480 -r 29.97 $output

You can download it or fork it from the source on github.

Once you download those scripts you just have to run them.

cd /directory/contains/video/files
/directory/that/contains/the/script/files/ffmpeg_vp8_encode.sh

Then you can specify which file to use as your input (source video) and the name to output it as. Then just run it again with the other script and you'll have 2 of the three complete.

If you want to customize those scripts you can edit them in any text editor and you can use the arguments from the ffmpeg documentation

For the H.264 mp4 video you have a lot more options. A lot of editing software can just export to mp4 with H.264 encoding. As for my website's video I used HandBrake.

Using Handbrake

Handbrake is very simple. Just download the correct version of the software for your computer's operating system. Install it, then run it. Upon starting it should just pop-up and ask for your source video which is the raw footage you want to encode. Then you can select your output just below that. If you select the MP4 File as your format you'll notice that it will add .m4v extension to the file name. That's fine for now and if you rename it to .mp4 it will play fine unless your audio codec is AC3.

After that click the Picture Settings at the top to select the 480 resolution which means the height of the video is 480 and it will calculate the width for you if the maintain aspect ratio checkbox is checked.

Once that is done click "Start" at the top toolbar and it will encode the file for you.

Displaying Video in HTML5

Finally you can upload those videos onto your site and play them with the HTML5 video tag like this:

<video>
    <source src="video_file.mp4" type="video/mp4" />
    <source src="video_file.webm" type="video/webm" />
    <source src="video_file.ogv" type="video/ogg" />
</video>

And that should be it, it should play on both desktops and iOS Mobile. I want to think it will play on Android devices but I haven't had a chance to test it. If you find that's not the case, please leave a comment.