23+ Useful HTML5 Open Source Online Video Players & Libraries,

Akamai has released a new Open Video Player for HTML5 <video> developer

toolkit, aimed at simplifying the task of creating flexible HTML5-based video

player applications for delivery of HTTP content.

At first Ambilight looks like an average video player, the kind that loads

standard HTML5 video. As the video plays, you very quickly notice what’s

happening at the edges. The plugin automatically grabs the average colour in

each area, and spreads it across the bounds of the video. This is not a new

concept, as there have been hardware ambilights as well as Flash versions of the

same. What makes this one special, is that it’s written entirely using HTML5

Demo url:

CwVideo is a toolkit to use and control HTML5-video with the latest realease

of MooTools – and two extensions of the Fx.Slider class: CwVideo.Volumeslider

(creates a volume slider) and CwVideo.Timeline (timeline slider with several

features to simplify creating your own video controls).

This plugin enables HTML5 native playback for users with compatible browsers

while offering an elegant degradation to other users through very

lightweight Flash players. For HTML5 playback, it

auto-detects and offers different alternatives, or degrades to Flash, and

(failing even that) to download links.

This WordPress plugin is similar to the Video for Everybody plugin but there

are a few differences. While Video for Everybody encourages encoding video in

both Theora and H.264, if you just want to use one H.264 file, this plugin will

force Firefox to fallback on Flash and play the H.264 video that way.

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.

Features

HTML5 video with Flash fallback

Easy CSS/HTML/JS customization and theming

Full screen support

Completely open source and free for commercial use

This HTML5 video player is fairly straight forward and offers all of the

basic controls you’d expect a video player to have. The player controls are

visible when the video is paused or when the user’s cursor is over the video.

Compatibility: Chrome, Firefox, Opera, Safari

The html5media project consists of a single, minified Javascript file that is

used to detect your browser’s HTML5 video capabilities. Any video tags that

cannot be played are dynamically replaced with a Flash video player.

Developed by Rasmus Andersson, lead creative & designer at Spotify. Psd

sources are available for the progress bar and icons, so you can customize the

player to your needs.

jme is an HTML5 audio / video development kit with Flash Fallback, which

focuses on flexibility, intuitive DOM-API and semantic code.

The jQuery UI Video widget enhances your HTML5 <video>

The JW Player for HTML5 is a fully skinnable and configurable player based on

the new <video>tag found in HTML5. The JW Player is

currently one of the most popular open source video solutions on the web and the

new version offers seamless fallback support for JW Player for Flash.

This is important for developers or designers who want to make sure that no

matter what browser is being used (even IE6), video will be watchable.

JW Player for HTML5 uses jQuery and supports playback of H.264, Theora and

FLV video. It also supports existing JW Player and PNG skins.

Kaltura have developed a full HTML5 Video Library (it is being used by

Wikipedia) that works in ALL major browsers, including IE, by using a unique

‘fallback’ mechanism – not only for the format of the video that is played, but

also for the actual video player version that is used.

A base component of the Kaltura library bridges the gap between the few

browsers that don’t support HTML5, by falling back to its underlining Flash

It has been developed with HTML, CSS and jQuery, and with built in support

for the jQuery Themeroller, styling is amazingly easy and flexible which will

maintain a unified look and feel across all operating systems and browsers. And

finally it provides automatic transcoding into all supported formats (OGG,

H.264, MOV, FLV etc.).

Kaltura Video Player Demo:

jQueryUI Themed Player Demo:

This is a MooTools custom controls library for the HTML 5 video element. It

features: playlist and subtitles support, settings panel for enabling or

disabling various options such as looping, captions and auto-hiding of controls

bar.

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.

The mediafront platform is an open source (GPLv3) front end media solution

for the web. Through its integration with popular content management systems, it

employs an innovative and intuitive interface that allows any website

administrator to completely customize the front end media experience for their

users without writing any code!

With the onset of HTML5, there is a dramatic paradigm shift in the wake for

online media content delivery. For well over 6 years, this industry has been

dominated by the proprietary Adobe Flash Player, which has been used to deliver

high quality media to audiences far and wide. This reign is coming to a dramatic

end as new Open Standard technology takes its place. Yes, HTML5 is here, and we

present to you the Open Standard Media (OSM) Player!

OSM Demo:

Projekktor is a free JS wrapper for the new HTML5 video and audio elements.

It solves cross browser and compatibility issues, adds some eye candy to the

native players and provides powerful non standard features. It is not

necessarily required in order to provide native media but be aware: You will

never want to miss this pleasing touch of comfortableness again.

Its compatible with IE6, IE7, IE8, Firefox, Safari, Chrome and even works

very well with the iPhone and iPad.

SublimeVideo is an HTML5 video player that will allow you to easily embed

videos in any page, blog or site using the latest modern web standards.

SublimeVideo Demo:

Video JS is a javascript-based video player that uses the HTML5 video

functionality built into advanced browsers. In general, the benefit of using an

HTML5 player is a consistent look between browsers.

Features:

Free & Open Source

Lightweight. NO IMAGES USED

100% skinnable using CSS

Library independent

Easy to use

Easy to understand & extend

Consistent look between browsers

Full Window Mode

Volume Control

Forced fallback to Flash (even when there is an unsupported source)

Video for Everybody is simply a chunk

of HTML code that embeds a video into a website using

the HTML5 <code>&lt;video&gt;</code> 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 .

It works by playing the HTML5 video, only if the browser supports it. If it

doesn’t, it will fallback on Quicktime, and if there is no Quicktime installed

it will fallback to Flash. Finally, if all else fails, a placeholder image is

shown and the user can download the video using the links provided.

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.

Get a player in 3 easy steps

Full Javascript/HTML/CSS UI

Full Availability of HTML5 &lt;video&gt; attributes

Pass content to be displayed in browsers that do not support

&lt;video&gt;

Support for multiple formats for each video.

Support for WebKit’s fullscreen API

Full Range of Video Controls

Specify which controls you need

Follows YUI practices (or at least tries too!)

In this article we’ll explore building a interactive set of controls using a

JavaScript UI library (Glow), for playing a video file. It could easily be

adapted to jQuery UI or similar.

It’s not a open source video player, only a tutorial, but following this

tutorial, you can build the HTML5 player for yourself. This tutorials gives 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.

Some screenshot from ,

thanks!