Best HTML5 Media Player Implementations

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

31 Responses to “Best HTML5 Media Player Implementations”

  1. 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. really helping article with latest techniques of HTML 5. thanks for sharing

  3. 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. 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. This is an awesome video list! Thanks for sharing! i Hope you can send as a Mp4 format soon.

  6. 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. Thank you for sharing, perfect!

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

  9. Really nice players, thanks for sharing..

  10. 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. 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. @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. @ 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. Nice, thanks for sharing.

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

  16. Thanks for sharing it…

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

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

    http://html5arena.blogspot.com/

  18. thanks for ur help. for share this post.

Leave a Reply