A couple of days ago I wrote about Why Adobe Flash penetration is more like 50% than 99%, which resulted in a bunch of comments as well as a fair bit of discussion elsewhere including commentary from Adobe's own John Dowdell. It's good to see some healthy discussion on this topic (though it's a shame to see some branding it "more flash hate" and an AC poster asking "How much did M$ pay you for this").
Anyway everyone likes a good demonstration so I figured why not create a proof-of-concept YouTube killer that uses HTML 5's video tag?
Knowing that around 20% of my visitors already have a subset of HTML 5 support (either via Safari/WebKit or Firefox 3.1 beta), and that this figure will jump to over 50% shortly after Firefox 3.1 drops (over 50% of my readers use Firefox and over 90% of them run the most recent versions), I would already be considering taking advantage of the new VIDEO tag were I to add videos to the site (even though, as a Google Apps Premier Edition user I already have a white label version of YouTube at http://video.samj.net/).
Selecting the demo video was easy - my brother, Michael Johns, did a guest performance on American Idol last Wednesday and as per usual it's already popped up on YouTube (complete with a HD version). Normally YouTube use Flash's FLV codec but for HD they sensibly opted for H.264 which is supported by Safari (which supports anything QuickTime supports - including Ogg Vorbis for users with Perian installed). Getting the video file itself is just a case of browsing to the YouTube page, going to Window->Activity and double clicking the digitally signed link that looks something like 'http://v4.cache.googlevideo.com/videoplayback' which should result in the video.mp4 file being downloaded (though now Google are offering paid downloads they're working hard to stop unsanctioned downloading).
On the other hand Firefox 3.1 currently only supports Ogg Vorbis for licensing/patent reasons as even Reasonable and Non-Discriminatory (RAND) licensing is unreasonable and discriminatory for free and open source software. Unfortunately the W3C working group infamously removed a recommendation that implementors 'should' support Ogg Vorbis and Theora for audio and video respectively. Currently a codec recommendation is conspicuously absent from the HTML 5 working draft. So what's a developer to do but make both Ogg and H.264 versions available? Fortunately transcoding MP4 to OGG (and vice versa) is easy enough with VLC, resulting in a similar quality but 10% smaller file (video.ogg).
The HTML code itself is quite straightforward. It demonstrates:
- A body onLoad function to switch to Ogg for Firefox users
- YouTube object fallback for unsupported browsers (which in turn falls back to embed)
- A simple JavaScript Play/Pause control (which could easily be fleshed out to a slider, etc.)
- A simple JavaScript event handler to show an alert when the video finishes playing
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Towards a Flash free YouTube killer...</title>
</head>
<!-- Basic test for Firefox switches to Ogg Theora -->
<!-- TTest could be arbitrarily complex and/or run on the server side -->
<body onLoad="if (/Firefox/.test(navigator.userAgent)){ document.getElementsByTagName('video')[0].src = 'video.ogg'; }">
<h1>Michael Johns & Carly Smithson - The Letter</h1>
<p>(Live At American Idol 02/18/2009) HD
(from <a href="http://www.youtube.com/watch?v=LkTCFo8XfAc">YouTube</a>)</p>
<!-- Supported browsers will use the video code and ignore the rest -->
<video src="video.mp4" autoplay="true" width="630" height="380">
<!-- If video tag is unsupported by your browser legacy code used -->
<object width="630" height="380">
<param name="movie" value="http://www.youtube.com/v/LkTCFo8XfAc&hl=en&fs=1&ap=%2526fmt%3D22"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/LkTCFo8XfAc&hl=en&fs=1&ap=%2526fmt%3D22"
type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"
width="630" height="380"></embed>
</object>
</video>
<!-- Here's a script to give some basic playback control -->
<script>
function playPause() {
var myVideo = document.getElementsByTagName('video')[0];
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
</script>
<p><input type=button onclick="playPause()" value="Play/Pause"></p>
<!-- Here's an event handler which will tell us when the video finishes -->
<script>
myVideo.addEventListener('ended', function () {
alert('video playback finished')
} );
</script>
<p>By <a href="http://samj.net/">Sam Johnston</a> of
<a href="http://www.aos.net.au/">Australian Online Solutions</a></p>
</body>
</html>This file (index.html) and the two video files above (video.mp4 and video.ogg) are then uploaded to Amazon S3 (at http://media.samj.net/) and made available via Amazon CloudFront content delivery network (at http://media.cdn.samj.net/). And finally you can see for yourself (bearing in mind that to keep the code clean no attempts were made to check the ready states so either download the files locally or be patient!):
Towards a Flash free YouTube killer...
