Html5 Video Player that works on All Browsers, compatible with Flash

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.

Thanks to HTML5 Media, you can now embed a HTML5 video that will automatically use Flash (Flowplayer) if the browser doesn’t support HTML5.

With the HTML5 support already there on Firefox(nightly)SafariChromeAndroid 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="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="https://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.

We write about Open SourceProgrammingWebAppleiPhoneAndroid and latest in Tech @taranfxon Twitter or subscribe below:

GD Star Rating
loading...
GD Star Rating
loading...
Html5 Video Player that works on All Browsers, compatible with Flash, 1.0 out of 10 based on 1 rating

1 thought on “Html5 Video Player that works on All Browsers, compatible with Flash”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.