Friday, March 19, 2010

HTML5 Video on all browsers

There are two ways this can be accomplished.
1) Encode the video in 3 different formats (MP4, OGG and M4V) and use the video tag to accommodate for different browsers:

<video autobuffer controls tabindex="0" width="320">
<!-- if Firefox -->
<source src="digital_nation.ogg" type="video/ogg"></source>
<!-- if Safari/Chrome-->
<source src="digital_nation.mp4" type="video/mp4"></source>
<!-- If the browser doesn't understand the <video> element, then reference a Flash file. You could also write something like "Use a Better Browser!" if you're feeling nasty. (Better to use a Flash file though.) -->
<embed allowfullscreen="true" allowscriptaccess="always" height="260" src="digital_nation.m4v" type="application/x-shockwave-flash" width="320"></embed>

</video>

This example can be found at www4dev.uwm.edu/sois/test/digital_nation. This can be time consuming because you will have to re-encode the same video three times to make it work.

2) Alternatively, use javascript to convert the MP4 formatted video to Flash if the browser does not support the video tag. An example is the html5media project that is located at Google Code (http://code.google.com/p/html5media/), where you can find the javascript to link to.
Sample Code:

<script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script>
<video src="video.mp4" width="320" height="240" controls autobuffer></video>

No comments:

Post a Comment