HTML5 video – no webm.

Quick recipe for HTML5 video with Flash fallback. Used here.

  1. Download (and fix) HTML5media
  2. Your <head> will need flowplayer.js and html5media.js. Keep flowplayer.swf in the same directory.
  3. Convert source videos to h264/mp4 and ogg. See ffmpeg switches below.
  4. Add <video> tag. Add two <source> lines and an optional <poster> line. See below.

Once installed correctly, h264 will play in Chrome, Safari, Mobile Safari (iPad). Ogg will play in Firefox. Flash will play the H264 on Explorer (and Firefox if you don’t provide an ogg version).

Here are the ffmpeg switches for compressing these files. I’ve installed ffmpeg from Debian multimedia. These files are square pixel and square format. You can also check the input format by just calling ffmpeg -i INPUT.mp4. That might give you an idea of what -b (bitrate) and -bt (bitrate for libx264) should be like.

ffmpeg

rossetti@Wakatipu:~$ ffmpeg -version
FFmpeg version SVN-r13582, Copyright (c) 2000-2008 Fabrice Bellard, et al.

rossetti@Wakatipu:~$ ffmpeg -i flower3_15_2.mp4 -cropright 210 -cropleft 210 -aspect 1 -s 544x544 -vcodec libx264 -r 25 -b 516k -bt 516k -crf 22 flower3_15_2-crop.mp4

rossetti@Wakatipu:~$ ffmpeg -i flower3_15_2.mp4 -cropright 210 -cropleft 210 -aspect 1 -s 544x544 -r 25 -b 516k flower3_15_2-crop.ogg

HTML5

This code hides the builtin controller. You can easily control it from javascript however. This one will preload anyway (it will start buffering even if paused) and autoplay. The contents of the <video> tag is parsed by the browser looking for a file it can play. Firefox will stop parsing at ogg and play. Internet Explorer (without the html5media javascript library) will only see the <img> tag. If you’re not autoplaying, <poster> will show before play.

One thing to watch is that <video> may not respect the width/height attributes that you specify.

<video width='540' height='540' autoplay='true' style='border : none;'>
<source src='/sites/all/themes/grandiflora/libs/flower3_15_2-crop.mp4' autoplay preload type='video/mp4'>
<source src='/sites/all/themes/grandiflora/libs/flower3_15_2-crop.ogg' autoplay preload type='video/ogg'>
<poster src='/sites/all/themes/grandiflora/libs/magnolia-still.jpg' width='540' height='540' />
<img alt='Grandiflora of Sydney delivers roses and beautiful native and seasonal flowers and specialises in bridal flowers, weddings and events.' src='/sites/all/themes/grandiflora/libs/magnolia-still.jpg' width='540' height='540' />
</video>

HTML5media

The fix I mention is in the regular expression that detects compatibility. It fails (for me) in Firefox on mp4s. Here’s a patch.

// Extracts the mimetype from a format string.
function getMimeType(format) {
- return format.match(/\s*([\w-]+\/[\w-]+);|\s/)[1];
+ if ( format.match(/\s*([\w-]+\/[\w-]+)|\s/)[1] )
+ return format.match(/\s*([\w-]+\/[\w-]+)/)[1];
+ else
+// this fails if you pass in a raw mimetype ( ie firefox passing in type="video/mp4"
+ return format.match(/\s*([\w-]+\/[\w-]+);|\s/)[1];
}


Categories: HowTos

Tags: , , ,