Best HTML5 Media Player Implementations

Tools

Best HTML5 Media Player Implementations

Jun 03, 2010 insic 37 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>

</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.

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.

About the 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.

Zemanta

http://karmupro.com japanpro

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

Great and fantastic !
Pingback: Best HTML5 Media Player Implementations « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit
http://www.smashingbuzz.com/ Smashing Buzz

really helping article with latest techniques of HTML 5. thanks for sharing
Pingback: Best HTML5 Media Player Implementations | INSIC DESIGNS » Web Design
Pingback: Best HTML5 Media Player Implementations | INSIC DESIGNS : Popular Links : eConsultant
Pingback: links for 2010-06-05 « Mandarine
Pingback: Eric Blue’s Blog » Weekly Lifestream for June 6th
http://www.kawaiijapanese.com Ryan

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.
Alex C

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?
http://philwebservices.wordpress.com/ Philwebservices

This is an awesome video list! Thanks for sharing! i Hope you can send as a Mp4 format soon.
http://devharbor.blogspot.com Alex C

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.
http://www.mehmetalp.com.tr Mehmet ALP

Thank you for sharing, perfect!
Philwebservices

I came to read it again! it is a nice article!
Pingback: a123_'s me2DAY
Pingback: More Cool HTML5/JavaScript Video Players | Tech Alps
http://www.dekogroup.com.tr deko mühendislik

Really nice players, thanks for sharing..
Ivan

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.
Simon

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.
Alex C

@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/
Piter

@ 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.
Pingback: Best HTML5 Media Player Implementations | Html5 Tutorials
Pingback: Html5 hakkında bilmeniz gerekenler | web tasarım ve internet magazin
http://www.onlineuzlet.hu Lacy

Nice, thanks for sharing.
Pingback: 40 HTML5 Media Players + Tutorials and Resources - WebsitesMadeRight.com
Pingback: 45 HTML5 Media Players + Tutorials and Resources - WebsitesMadeRight.com
Pingback: My Recent Diigo Bookmarks
johncein

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

Thanks for sharing it…
Alex

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

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

http://html5arena.blogspot.com/
http://liveonlineradio.net/ Mahabub

thanks for ur help. for share this post.
Pingback: How do these elements fade out on this site?
http://html5socket.com/ html5 music player

I like the new look of the JW Player is faster is better and my slow computer with crappy video card will not got slow anymore, nice job you guys! youtube html5 player
http://www.komputerbogor.com Komputer Bogor

Thank you for sharing, i need this…
Pingback: WordPress Arena: A Blog for WordPress Developers, Designers and Blogger
ThomasG

I have been trying to locate an easy to use video player that is acceptable around the world and in China. I have Easy Video Player cannot get the information I need.
lbp

Please check http://www.leanbackplayer.com. LeanBack Player is a Javascript based HTML5 Media Player UI that uses
build-in HTML5 and element functionality of
standard browsers, platforms and devices. It’s very easy to integrate,
it’s skinnable by using CSS, it’s independent of any other javascript
libraries and it’s adaptable by using extensions.
http://www.facebook.com/mystartpage Mystartpage Kolopo

Thank you for this videoplayer list