I have been hankering to post some video in HTML5’s extremely easy to use format. The issue was I couldn’t find anything decent to post. Ends up I really like well done Kinetic Typography. Two very well done and popular videos are V’s speech to Eve from V for Vendetta and the Chemical Burn scene from Fight Club. These videos were done by Chris Silich and Sebastian Jaramillo respectively. My deepest thanks go out to them for providing me with the raw files to re-encode and permission to use them.
Flash is great for some things but not for others. HTML5 specs include a <video> tag that allows easy platform based decoding. Disadvantages are lack of control (cannot splice ads in) and source availability (unless you want to code some rather nasty stuff, people can download the video). Flash solves both these problems but it doesn’t solve the mobile device issue, mainly it’s not a lightweight player when decoding. Some devices have hardware based H.264 decoding available.
You can put video up in whatever format you wish, however the issue remains with codecs. Different browsers prefer different codecs. Mobile Safari only recognizes the H.264 codec, while Firefox only recognizes Theora (Ogg container, Vorbis audio). Theora / Vorbis is free while H.264 is licensed. Chrome supports H.264 and VP8, which is another codec. For more reading on this lovely subject I refer you to Dive Into HTML5: Video which has excellent breakdowns and technical details about codecs.
The markup for this is very easy and I’ll try to explain it in pieces.
<video id="vidv" controls="true" preload="none" width="480" height="272" poster="src" draggable="true">
The <video> tag starts off with some pretty intuitive options. Controls implements the browsers native control bar, preload="none" stops it from preloading (doesn’t work in Chrome), width, height, poster= allows you to specify an external image to display initially instead of the first few frames of the video. Draggable will supposedly let you “drag to save” but this doesn’t work in all browsers.
In order to overcome the aforementioned codec issue I include two differently encoded sources. One in H.264 (Chrome, Safari), and one in Ogg Theora / Vorbis. These are specified as different source elements.
<source type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'....
<source type='video/ogg; codecs="theora, vorbis"'....
Something to understand is this does not work in any version of IE. IE users have my sympathies. You shouldn’t be using that browser anyways. There are open source Flash player workarounds, but I wanted to keep this pure HTML5. In a true usability setting you would implement various JavaScript code to determine feature capabilities and render the appropriate video setting.
Without further ado, the videos.
For those wondering about V’s speech, I have it below as well as title anchor tags that help clarify the words.
Voilà! In view, a humble vaudevillian veteran, cast vicariously as both victim and villain by the vicissitudes of Fate. This visage, no mere veneer of vanity, is a vestige of the vox populi, now vacant, vanished. However, this valorous visitation of a by-gone vexation, stands vivified and has vowed to vanquish these venal and virulent vermin vanguarding vice and vouchsafing the violently vicious and voracious violation of volition. The only verdict is vengeance; a vendetta, held as a votive, not in vain, for the value and veracity of such shall one day vindicate the vigilant and the virtuous. Verily, this vichyssoise of verbiage veers most verbose, so let me simply add that it is my very good honor to meet you and you may call me V.
Original text from V for Vendetta, corrected and marked up by Joshua Kehn