How To Custom HTML5 Player-Make HTML5 Player Using CSS and JQuery

• Tweet

• Tweet

Introduce HTML 5

a. HTML5 brings us a special feature. That is video tag, which will become a standard of web video playback method. Using HTML 5 tech to make and generate a HTML5 player is a cool thing. 🙂

b. Support any platform including Windows, Unix, Linux, Mac, iOS, Air, Android. View HTML5 contents in any operating system.

c. Fast responding speed and magnificent visual effect for game website.

d. HTML5 Formats:
HTML5 MP4, WebM, Ogv.

HTML5 players I like

VideoJS:

The most popular HTML5 video player. It is an open source and free for anyone. You can use CSS to easily custom player skin. This player supports for full screen display. Most attracting point is that it will auto switch to flash playback when encountering unsupported browsers.

SublimeVideo:

A HTML5 player based on Cloud concept. It owns many powerful features. But it is not free.

OSM Player:

Developed by Alethia Inc and all-in-on web player. Pretty cool!

Video for Everybody:

It will embed a small strip of HTML5 codes to support HTML5 videos. Also auto switch to Flash video playback for unsupported browsers.

Kaltura HTML5:

Full HTML5 video solution – Compatible with all main stream browsers adapting unique fallback tech.

FlareVideo:

Developed by Alex MacCaw. Main features include:

a. Flash is the alternative solution for unsupported browsers.
b. Custom HTML5 player theme.
c. Support Full Screen playback.

Projekktor:

Open source HTML 5 video player and it is based on Javascript. Solve the problem for cross-platform compatibility and enhance the visual effects.

An example HTML5 player using CSS and jQuery

How to make a HTML5 player

1. http://yalcind.wordpress.com/2010/08/03/building-a-custom-html5-video-player-with-css3-and-jquery

2. http://www.html5videoplayer.net