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.
</video>

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="http://video.reelseo.com/staticfiles/videoplayer.swf?config=http://video.reelseo.com/xml/dBA8HPoe-Bj0549JT.xml&ie6=fail">
<param name="movie" value="http://video.reelseo.com/staticfiles/videoplayer.swf?config=http://video.reelseo.com/xml/dBA8HPoe-Bj0549JT.xml&ie6=fail" />
<!-- 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>
<ul>
<li>Upgrade to <a href="http://getfirefox.com" target="_blank">Firefox v3.5</a>,
or <a href="http://apple.com/safari" target="_blank">Safari v4</a></li>
<li>Install <a href="http://get.adobe.com/flashplayer/" target="_blank">Adobe Flash Player</a></li>
<li>Install <a href="http://apple.com/quicktime/download/" target="_blank">Apple QuickTime</a></li>
</ul>
</object>
<!--<![endif]-->
</object>

</section>