HTML5 video for CityTalks site
I've received an H.264 video to be posted on the CityTalks site (once we have the signed permissions in place). I'm taking this opportunity to figure out how best to handle video using HTML5, now we have it. This is what I've ended up with so far:
- The video is encoded initially (by the person supplying it) as H.264.
- I'm transcoding it into Theora at the command line thus:
ffmpeg -i DrLS.mp4 -acodec vorbis -vcodec libtheora DrLS.ogv
- At the head of the page, I'm making sure I output the right mime type, and grabbing the video file name:
header("Content-type: application/xhtml+xml;charset=utf-8"); $vid = $_REQUEST["video"]; - The document starts with the HTML5 doctype declaration:
<!DOCTYPE html>
This is not supposed to be necessary, but if you leave it out, the whole page gets borked on both IE8 and IE9 beta. - The video tag itself looks like this:
<video controls="controls" width="400" height="224"> <source src="media/<?php echo $vid; ?>.ogv" type='video/ogg; codecs="theora, vorbis"'/> <source src="media/<?php echo $vid; ?>.mp4" type='video/mp4; codecs="avc1, mp4a"'/> <p><a href="media/<?php echo $vid; ?>.mp4">Download the video</a>.</p> </video>
- To make this work on Firefox, which depends on the ogv file, I had to add a .htaccess file containing this:
AddType video/ogg .ogv
but I've put in a request to sysadmin to add this mime type on the UVic cluster.
Video works on Firefox, Opera, and Chrome; the whole page fails on IE8 (although if I serve it as text/html, the page does render and the download link shows up nicely); and it doesn't work on IE9 beta (which fails to show the download link, although it does appear to be trying to render the video player box somehow, and is able to handle the proper mime type). So for IE, I'm using a sniffer which detects IE8 and below, and serves with the text/html mime type. For IE9, we can wait and see; if video works when it's out of beta, then great, otherwise hopefully the download link will work as it should.
