Typically a video tag still looks like the following:

<video autoplay loop  poster="movie.jpg">
        <source src="movie.webm" type="video/webm">
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.ogv" type="video/ogg">
</video>

A Brief History

HTML5 video had a bit of a rough start a few years back, mostly due to inconsistent support and lack of agreement on codecs. Each of the major browsers threw in support for preferred codecs: Apple/MS wanted H264, partly due to the massive support and hardware support. Google wanted WebM (VP8 & VP9), its lovechild and FireFox wanted to use Ogg Theora, the most open and problematic of the three warring codecs. After the dust settled, developers had a few options: continue to use flash with h264 for mobile, use HTML5 video and support all video files, and lastly use HTML5 + a flash wrapped for h264, so all browsers were supported.

As of writing this, FireFox was the last major holdout until Cisco bought and licensed H264). That said, in the interest of an open web, most designers should opt to provide more than mpeg4 for legacy support, at least for the next year or two. For now, simply providing H264 is enough to support all modern browsers but the video tag wars aren’t finished, with H265 (MPEG5) vs VP9 (webm) looming.

Providing support for all three legacy video formats is a royal pain, mostly due to the lack of easy to use tools. For example: The popular video encoder Handbrake will encode to VP8 and Theora in a MKV wrapper but this won’t work for HTTP access. FFmpeg has support for both webm and ogv, but is geekier than my needs and Sorenson Squeeze, while a fantastic product hasn’t been budgeted for the project I’m working on.


What you’ll need:

Source video file (preferably high bit rate MPEG4)

OS X


The tools you’ll need:

VLC - Powerful and easy to use open source video player, can playback WebM and Theora

ffmpeg2theora - Command line utility for creating Theora

Hybrid for OS X - GUI wrapper for many open source tools, supports WebM 

Note if Hybrid doesn’t work, I’ve found that Hewbo Video Convertor works. It’ll crash after finishing an encode, but the video files it produces are good.


Creating a Theora (ogv) video

ffmpeg2theora is a command line utility but fear not. It’s actually easier than creating WebM videos. After you’ve installed ffmpeg2theora fire up your terminal.  

ffmpeg2theora only requires specifying the audio and video quality and source file to process a video file. It may take a few trials and errors to produce the lowest yet still watchable WebM video. I found that using a video quality of 6 worked fine for my video needs for a background video.

In the terminal type the following with a trailing space:

ffmpeg2theora -v 6 -a 7

Now drag the video from your desktop to the terminal window, and the terminal will automatically create a file path that looks similar to this:

ffmpeg2theora -v 6 -a 7 /Users/emerge/Desktop/video.mov

Soon as you hit return, your movie will start converting; it may take awhile depending on size/length.

If you’re creating a background video, simply ignore the audio setting:

ffmpeg2theora -v 6 /Users/emerge/Desktop/video.mov

The terminal window will continually update with estimated size and time to finish. I found my videos were significantly smaller than the estimated size.


Creating a WebM VP8 video

WebM is a container format much like other containers are: AVI, MOV, MKV. WebM containers can have VP8 and VP9 video. Since our goal is maximum legacy support, we’ll want to use VP8 when we create a video.

WebM is more of a pain to create, and so far Hybrid is the easiest freebie utility I’ve found, and it’s a mess. Fire up Hybrid.

Step 1:

Specify your source file, your codec, and your output.

image

Step 2:

Click on the VP8/9 tab and set your bit rate. This is a bit of trial and error so try something like 2000 VBR for starters; I was able to get away with 1500.

image

Step 3:

Go back to main and click add to queue

image

Step 4:

Click on jobs and click the arrow on the left to start your queue to encode. 

image

Step 5:

Be sure to check your results in VLC. Now you’re good to go.


Alt Method for WebM: Encoding on the cheap

If Hybrid proves too problematic, the $1 Hewbo Video Converter works too, and its GUI isn’t nearly as confusing. After every encode, Hewbo crashes, but the video files are good. At worst, you have to relaunch the app after every encode.