HTML 5 Video Demo

HTML 5 Flash JWPlayer Fallback

ogg --> mp4 --> JWPlayer(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 (using JWPlayer), 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

<section id="main">
<h2>HTML 5 Flash JWPlayer Fallback</h2>
<h3>ogg --> mp4 --> JWPlayer(flash) --> quicktime </h3>
<video width="640" height="360" poster="__POSTER__.jpg" controls autoplay autobuffer>
<!-- Adjust width and height to match your video -->
<source src="__VIDEO__.mp4" type="video/mp4" />
<!-- Safari 3 and 4 and iPhone play this -->
<source src="__VIDEO__.ogv" type="video/ogg" codecs="theora, vorbis"/>
<!-- Firefox 3.5 will play this -->
<!-- Flash video code-->
<object width="640" height="360" type="application/x-shockwave-flash" data="">
<param name="movie" value="" />
<!-- 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 *must* 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>
<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>