The element is one of the awaited feature in HTML5.  It now is easier to embed videos into web pages without any plugins. The element is supported by most popular browsers (including IE9), how ever one of the problems is if you want any version of IE under 9 to accept this element you can’t, it’s simple like that. Until now with the aid of JavaScript it’s easy to allow the have the element to work as it sits on top of the tag to provide better controls and fallback to flash for old browsers.

Here are 12 brilliant HTML5 video players which allow you to embed video into web pages and ensure backwards compatibility

1. SublimeVideo – HTML5 Video Player

SublimeVideo is designed to be super simple to integrate: by just adding a single-line-of-code to enable it in your web page.

2. Flare Video

FlareVideo is an open source, jQuery-powered HTML5 video player. The player supports fullscreen mode and has a fallback mechanism into a Flash-driven player.

3. Video JS

VideoJS is an HTML5 Video Player, built with Javascript and CSS, with a fallback to a Flash video player for when the browser doesn’t support HTML5 video.

4. Projekktor

Projekktor is a free HTML5 based video and audio player written in Javascript. It solves cross browser and compatibility issues, offers flash fallback for ancient browsers, adds some eye candy and provides powerful non standard features.comfortableness again.

5. HTML5 Video

Kaltura has developed a full HTML5 Video Library which is in use by Wikipedia, that works in ALL major browsers, even IE.  The library supports a seamless fallback with Flash. Upon detection of the client browser, the Kaltura HTML5 library chooses the right codec to use (specified in the source attributes) and the right player to display.  So whether you’re using flash, h264, ogg-theora or plan to use the anticipated VP8 codec – Kaltura’s library will make sure it is played on all browsers with the same html based UI

6. Ol Player jQuery Plugin

OIPlayer is a HTML5 audio and video player with fallback to Java and Flash. OIPlayer ‘attaches’ itself to all video and/or audio tags it encounters. Besides the general configuration of the plugin itself, it uses for each individual tag the attributes the respective tag has like poster, width, controls, autoplay etc.

7. jMedia Element

jme is an HTML5 audio / video development kit with Flash Fallback, which focuses on flexibility, intuitive DOM-API and semantic code.

8. Video For Everyone

Video for Everybody is simply a chunk of HTML code that embeds a video into a website using the HTML5 element, falling back to Flash automatically, without the use of JavaScript or browser-sniffing. It therefore works in RSS readers (no JavaScript), on the iPhone / iPad (don’t support Flash) and on many, many browsers and platforms.

9. YUI HTML5 Player

YUI HTML5 Player is a YUI 3 widget that creates a video player using the HTML5 video tag and JavaScript that is based on YUI 3. It was started as entry to the YUI 3 Gallery Contest in March 2010.

10. jQuery Video

The jQuery UI Video widget enhances your HTML5

11. Tutorial – How to Build an HTML5 Video Player

This is a tutorial on building an HTML5 video player in Javascript. It’s meant to give you a basic understanding of the different options you have with the new video tag in HTML5, and the javascript needed to create some of the typical video controls you’d find in other players. It’s library agnostic, meaning you don’t need a library like jQuery to create it, however once you understand how everything works it can definitely be simplified/improved on. I’m always open for feedback if you have suggestions.

12. Tutorial – Building A Better HTML5 Video Player With Glow

Last year Peter Gasston wrote a post (Building HTML5 video controls with JavaScript) introducing the HTML5 Media Elements API and demonstrating a simple set of controls for playing video. In this tutorial you see Peter using Glow, but it could easily be adapted to jQuery UI or similar.

Share

12 Brilliant HTML5 Video Players