Tuesday, August 30, 2011

HTML5 video player

One of the hottest topic in web development right now is about HTML5 and CSS3. Tutorials and test implementations of the technology emerge around the web. HTML5 players is one of the most notable new features in HTML5, it allows you to embed video without the use of flash.

HTML5 video player tag is as simple as the following line of code.

view plaincopy to clipboardprint?

  1. <video class='sublime' height='255' poster='poster.jpg' width='600'>  
  2. <source src='' title='mymovie.mov' type='video/mp4' />  
  3. <source src='' title='mymovie.mp4' type='video/mp4' />  
  4. <source src='' title='mymovie.ogv' type='video/ogg' />  
  5. </video>  

Add CSS3 styling and a couple lines of JavaScript, the result is a slick non-flash media player.

In this post I will showcase to you a list of best HTML5 media players around the web.

1. Video JS

Description: http://blog.insicdesigns.com/wp-content/uploads/2010/06/pl-html-4.jpg

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.

2. Sublime Video

Description: http://blog.insicdesigns.com/wp-content/uploads/2010/06/pl-html-1.jpg

This is an awaited soon to be released HTML5 player from Jilion.

3. YouTube HTML5 Player

Description: http://blog.insicdesigns.com/wp-content/uploads/2010/06/pl-html-2.jpg

To enable the HTML5 player, go here, Then click “Join the HTML5 Beta” link in bottom.

4. Vimeo HTML5 Player

Description: http://blog.insicdesigns.com/wp-content/uploads/2010/06/pl-html-3.jpg

To enable the HTML5 player, click the “Switch to HTML5 player” link below any video.

5. JW Player for HTML5

Description: http://blog.insicdesigns.com/wp-content/uploads/2010/06/pl-html-5.jpg

The JW Player for HTML5 is a fully skinnable and configurable player based on the new <video> tag found in HTML5. It is built using jQuery and enables a seamless fallback to the popular JW Player for Flash.

6. Video for Everybody!

Description: http://blog.insicdesigns.com/wp-content/uploads/2010/06/pl-html-8.jpg

Video for Everybody is simply a chunk of HTML code that embeds a video into a website using the HTML5 <video> 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.

7. Open Standard Media (OSM) Player

Description: http://blog.insicdesigns.com/wp-content/uploads/2010/06/pl-html-6.jpg

Open Standard Media (OSM) Player is an all-in-one media player for the web. It is an industry changing, open source (GPLv3) media player that is written in jQuery to dynamically deliver any type of web media, including HTML5, YouTube, Vimeo, and Flash.

8. Advection.net HTML5 Player

Description: http://blog.insicdesigns.com/wp-content/uploads/2010/06/pl-html-7.jpg

View player in action

9. DailyMotion HTML5 Video Player Demo

Description: http://blog.insicdesigns.com/wp-content/uploads/2010/06/pl-html-9.jpg

See player in action.

10. Kaltura HTML5 Video Tools

Description: http://blog.insicdesigns.com/wp-content/uploads/2010/06/pl-html-10.jpg

See player in action.

11. FlareVideo

Description: http://blog.insicdesigns.com/wp-content/uploads/2010/06/pl-html-11.jpg

FlareVideo is an open source and free HTML5 video player that falls back to Flash for incompatible browsers.

Want to add your favorite HTML5 Player in this list? Go hit the comment and I will happy to check it out.

Become expert in web development with 156-215 web development course. Learn about different web applications using 117-201 guide and 156-210 tutorials.