What I Got For Christmas HTML5 Video Version

You need to be using an up to date versions of either Firefox, Safari or Chrome to view the above video.

Ah, those five minute tasks that end up taking the whole day… So, the kids got the above wind-up, light-up, musical toy for Christmas. Perfect for a little Christmas Day video I thought. And while I’m at it, lets make it with HTML5 video tags. That should be quick and easy… Here’s what I discovered.

Dive Into HTML5 is a good resource

Firefox does not support MP4 files because of licensing issues. Safari/Chrome does not support OGG because of… err… licensing issues. So we need to make at least two video files to get anything like cross browser support. Maybe if MS decides to bless IE with <video> support we’ll get a third video format. Hoorah! It’s already looking like Flash is less work.

If your video file does not end in .ogg Firefox has a fit and refuses to show it.

The poster image gets shown for the the merest briefest of brief flashes before the first frame of the video file takes over - even before you have pressed play. Depending on how you read the spec. this could be right/wrong/optional. But I would have thought the “correct” behaviour would be to show the poster image until the user presses play or seeks.

Don’t try to transcode from MP4 to OGG. There be dragons here. The above video was taken on my Canon G9, which outputs an AVI file. It was easy to open this with QuickTime Pro and save as scaled down MP4. I then tried to transcode that MP4 file using VLC, ffmpeg2theora and Fireogg. None worked at the transcoding. Fireogg crashed. VLC produced a very truncated version. ffmpeg2theora messed up the aspect ratio. I had to start from the source AVI file (always good advice - go to the source) and use VLC’s “Advanced Open FIle…” to access all the transcoding settings and save as scaled down OGG/Theora/Vorbis.

Opera 10.5 does not include a video decoder yet but will in the future.