Best HTML5 Media Player Implementations

03. Jun, 2010 31 Comments

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.

<video class='sublime' height='255' poster='poster.jpg' width='600'>
<source src='' title='mymovie.mov' type='video/mp4' />
<source src='' title='mymovie.mp4' type='video/mp4' />
<source src='' title='mymovie.ogv' type='video/ogg' />
</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

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

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

3. YouTube HTML5 Player

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

4. Vimeo HTML5 Player

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

5. JW Player for HTML5

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!

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

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

View player in action

9. DailyMotion HTML5 Video Player Demo

See player in action.

10. Kaltura HTML5 Video Tools

See player in action.

11. FlareVideo

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.

PG

Author: insic

Subscribe in my RSS Feed for more updates on Web Design and Development related articles. Follow me on twitter or drop a message to my inbox.

Related Post

Delicious
Tools
, , ,

31 Responses to “Best HTML5 Media Player Implementations”

  1. japanpro Reply 03. Jun, 2010 at 9:26 pm

    Great Article, this is a reason why apple (steve jobs) see future of html5 in mobile tech not other way around.

    Great and fantastic !

  2. Smashing Buzz Reply 04. Jun, 2010 at 2:33 am

    really helping article with latest techniques of HTML 5. thanks for sharing

  3. Ryan Reply 11. Jun, 2010 at 8:06 am

    Do you have any recommendations for video players that work with both wordpress and iphone/ipad? I am creating a wordpress video blog that I would love to have viewable on i-products.

  4. Alex C Reply 12. Jun, 2010 at 12:00 pm

    Thanks for this great list. I’m looking for a video player that can be given just one file — MP4 format — and be able to auto play across all browsers/devices, without having to provide an OGV file as well.

    What I’ve learned is that you have to use an onerror handler on the video tag, or Opera and some other browsers will not be able to play the MP4 with many of these libraries.

    Maybe one of these libraries does the onerror as well for when we provide just the MP4?

  5. Philwebservices Reply 16. Jun, 2010 at 4:53 pm

    This is an awesome video list! Thanks for sharing! i Hope you can send as a Mp4 format soon.

  6. Alex C Reply 17. Jun, 2010 at 9:12 am

    I’m using the html5media library (http://github.com/etianen/html5media) and it’s working with MP4 and OGV with IE (including 6), Chrome, Opera, Safari, and iPhone/iPad; here’s my blog post about the process: http://devharbor.blogspot.com/2010/06/ogv-and-html5-player-in-firefox.html

    The html5media library falls back to the Flowplayer Flash player for browsers that don’t support the video tag, and it works by just referencing the JavaScript library in a script tag — no additional coding needed.

  7. Mehmet ALP Reply 23. Jun, 2010 at 6:11 pm

    Thank you for sharing, perfect!

  8. Philwebservices Reply 27. Jun, 2010 at 6:35 pm

    I came to read it again! it is a nice article!

  9. deko mühendislik Reply 24. Aug, 2010 at 6:58 pm

    Really nice players, thanks for sharing..

  10. Ivan Reply 07. Sep, 2010 at 12:48 pm

    I found this open source and easy to use HTML5 video player : http://fryplayer.net/

    The player is actually a jQuery plugin and has very nice features like the ability to skin, buffering, full screen mode and keyboard shortcuts.

    It is also possible to set the width-height and initial volume of the player.

  11. Simon Reply 25. Oct, 2010 at 9:11 pm

    I was wondering if there is any HTML5 Player with playlist? I only found this http://www.projekktor.com, but I’m not happy with the results.

  12. Alex C Reply 26. Oct, 2010 at 10:30 am

    @Simon: Try the new JW Player 5.3, which has built-in HTML5 video support as well as playlist support: http://www.longtailvideo.com/players/

  13. Piter Reply 27. Oct, 2010 at 6:08 am

    @ Simon: ..or try this: http://darkonyx.web-anatomy.com/en (HTML5/Flash hybrid) – it’s got an external playlist too. Maybe the blog author could add this one to the list too.

  14. Lacy Reply 29. Mar, 2011 at 7:54 am

    Nice, thanks for sharing.

  15. johncein Reply 27. Jul, 2011 at 5:38 am

    i use html5 fallback support flash video player. It works me superb… Thanks to http://hdwebplayer.com

  16. anil Reply 12. Sep, 2011 at 2:54 am

    Thanks for sharing it…

  17. Alex Reply 17. Sep, 2011 at 3:16 am

    thanks. enjoyed the post .. here is another usefull stuff

    All about html5, templates,news,apps everything here.

    http://html5arena.blogspot.com/

  18. Mahabub Reply 26. Sep, 2011 at 1:04 pm

    thanks for ur help. for share this post.

Leave a Reply