HTML 5 Video Demo

HTML 5 YouTube Fallback

ogg --> mp4 --> YouTube(flash) --> quicktime

The Most Basic code

Theoretically you could simply do the following and that would work to show a video that works in all HTML5 supported browsers.

<video width="640" height="360" poster="/POSTER.jpg" controls="controls">
	<source src="__VIDEO__.ogv" type="video/ogg" />
	<source src="__VIDEO__.mp4" type="video/mp4" /
	You need an HTML 5-capable browser.

The Fallback code

Here's a quick look at the code from the above HTML 5 video player which works in all HTML5 supported browsers, then fallsback to those that support flash (YouTube), then quicktime. If none are supported, there is a fallback message that allows the user to download the video file and then tells them how to update their browser to an HTML5 supported version

<video width="640" height="360" poster="/POSTER.jpg" controls="controls">
	<!-- Adjust width and height to match your video -->
<source src="/__VIDEO__.ogv" type="video/ogg" />
<!-- Firefox 3.5 will play this -->
<source src="/__VIDEO__.mp4" type="video/mp4" /> <!-- Safari 3 and 4 play this -->
<!-- Flash video code - this is for YouTube videos - note the parameters after the URL -->
<object width="640" height="385" type="application/x-shockwave-flash" data="YouTube_URL&amp;hl=en&amp;fs=1&amp;rel=0&amp;hd=1">
<param name="movie" value="YouTube_URL&amp;hl=en&amp;fs=1&amp;rel=0&amp;hd=1" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<!-- End of Flash video code -->
<!-- No Flash? (iPhone) fall back to a QuickTime -->
<!--[if gt IE 6]>
<object width="640" height="360" type="video/quicktime">
<param name="src" value="/__VIDEO__.mp4" />
<!-- fallback message -->
<img src="/POSTER.jpg" width="640" height="360" />
<!-- you need to offer a download link as they may be able to play the file locally -->
<p> <strong>No video playback capabilities detected.</strong> Why not try to download the file instead?<br />
<a href="/__VIDEO__.mp4">MPEG4 / H.264 “.mp4” (Windows / Mac)</a> | <a href="/__VIDEO__.ogv">Ogg Theora &amp; Vorbis “.ogv” (Linux)</a> </p>
<p> To play the video here in the webpage, please do one of the following: </p>
<ul> <li>Upgrade to <a href="" target="_blank">Firefox v3.5</a>,
or <a href="" target="_blank">Safari v4</a></li>
<li>Install <a href="" target="_blank">Adobe Flash Player</a></li>
<li>Install <a href="" target="_blank">Apple QuickTime</a></li> </ul>
</object> <!--<![endif]--> </object> </video>

Chris's Copy

We have been testing this out now for some time and we are unimpressed. This will not be a Flash killer that some HTML Evangelists are hoping it will be. It's inconsistent across browser, the videos have very specific encoding and formatting restrictions and overall we're unimpressed.

Now we know that it's years from full implementation and that things will progress over time but right now we're asking, why even replace Flash at all? Let's face it, it's ubiquitous. Almost everyone has it installed and even if they don't they're not afraid to do it. So let's just stick with Flash for now. It's not really all that bad, is it?