HTML 5 Videos

I’m trying to add some videos to a website using the new HTML 5 video tag. This has been my workflow:

== Install required software

The most popular encoder is ffmpeg apparently. On my mac I got it installed running

brew install ffmpeg --use-gcc

The compilation fails without the --use-gcc flag. Then I tried installing ffmpeg2theora, but the homebrew recipe was failing. I ended up installing a precompiled package from the main site. Once you double click the mpkg file the new binary will be installed in /usr/local/bin, which is good because it’s the same directory used by homebrew.

== Script to convert the existing videos

To play videos in most browsers you need at least two formats: MP4 and Ogg Theora. The blog post from solidwebcode.com has been extremely helpful on this. I’ve written my own encoding script, quite similar to his’. This is my version:

#!/bin/sh
ffmpeg -y -i "$1" -s 568x320 -b 384k -vcodec libx264 -flags +loop+mv4 -cmp 256 \
-partitions +parti4x4+parti8x8+partp4x4+partp8x8 -subq 6 -trellis 0 -refs 5    \
-bf 0 -flags2 +mixed_refs -coder 0 -me_range 16 -g 250 -keyint_min 25          \
-sc_threshold 40 -i_qfactor 0.71 -qmin 10 -qmax 51 -qdiff 4 -acodec libfaac    \
-ac 1 -ar 16000 -r 13 -ab 32000 -aspect 16:9 "$1.mp4"
ffmpeg2theora "$1.mp4" "$1.ogv"

== Video player

I’ve decided to use VideoJS, too. With it Chrome 16 and Firefox will use the ogv file by default. Safari will use the mp4 file. A minor issue I’ve noticed with Internet explorer is that the movie clip urls should be absolute.