HTML5 <video> Tag Support For All Browsers

Videos is a very big feature which will render Flash videos almost useless, however not every browser supports HTML5 yet, the few that do also are either development versions or beta versions.

So, as a developer how would you switch to HTML videos? Well, there is a way by using a new JavaScript API which adds support for the HTML5 <video> tag in all browsers.

The API in question is called “html5media” and makes use of jQuery to display the default HTML5 video player if the browser supports it, or defaults to Flowplayer if the browser does not support it.

This will ensure that your <video> tag will play in all browsers, irrespective of whether they support it or not, definitely a good way to start using HTML5 videos in your project.

The only downside of this API is that you will have to include a JavaScript library in all pages that you want to insert the HTML5 videos in as shown below.

HTML5 Video Support for All Browsers

Once you do that, the html5media JavaScript library will take care of displaying the videos to both HTML5 browsers as well those which do not support it.

Download and Learn more about html5media. You can also view the demo of the script in action by visiting this page on a HTML5 compliant browser and one which does not support it. The only downside of this is that your video needs to be encoded in either the h.264 codec (mp4) or Theora codec (ogv).

2 thoughts on “HTML5 <video> Tag Support For All Browsers”

  1. HTML5 is a great theory that isn't, IMHO, quite ready yet. I have many ski videos on my site, and, in order to get the full effect you need to see them in fairly high quality. The problem with the "use HTML5 and fall back to Flowplayer" idea is that Flowplayer deals with the buffering/pausing/bandwidth issues far better than the HTML5 browsers. All of the HTML5 browsers can have their little quirks with respect to dealing with how the video was encoded, and bandwidth issues.

    I'm in the process of trying to figure out how I can get Flowplayer to gracefully fail to HTML5, which, if I could figure it out, would probably be the best solution.

    If anyone has ideas on how to do that, let me know!

    -Karl Kelman

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>