Youtube’s adoption of HTML5 will be painfully slow due to the constraints over change of codec to an open one. But does that mean that web should wait for HTML5 video embedding? No!
Million and billions of Blogs, websites, portals can now have HTML5 video embedded into their content without worrying about compatibility.
With the HTML5 support already there on Firefox(nightly), Safari, Chrome, Android and iPhone , Opera browsers, it’s fair enough to set the trend. Prefer HTML5 video just because it’s open and more powerful. All the runtime SVG, canvas transformations can be applied, which can do magic that is much harder to achieve with Flash.
HTML5 Media supports popular H.264 MP4, and limited Ogg videos(for Firefox) as of now. To enable HTML5 video tags in all major browsers, simply paste the following code into the <head> of your document. Alternatively it can be out in <body> too:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="http://html5media.googlecode.com/svn/trunk/src/jquery.html5media.min.js"></script>
If you’re already using jQuery 1.4 in your page, then you can leave the first line out. Just be sure to include html5media underneath your own jQuery declaration.
HTML5 video tags can be embedded using the following syntax:
<video src="video.mp4" width="320" height="240" controls autobuffer></video>
You can even add following attributes to get additional functionality:
- controls – Add a set of controls to the video.
- autobuffer – Start downloading the video automatically.
- autoplay – Start playing the video automatically.
- loop – Keep playing the video in a loop.
Here is a Video embedded using HTML5 Media that works with All:
Second one is a 720p HD Video embedded using HTML5 Media (Works on Chrome, Safari): (Doesn’t work with Firefox, IE coz its H.264.
Apart from this project, there is another called Video for Everybody, which uses quicktime in absence of HTML5 and then flash.