10 Amazing HTML5 Media Player Implementations (Inspiration)

Posted by: , In: Coding, Inspiration, On: February 2, 2011 | 8 Comments

HTML is the markup language that makes up every page on the web. The newest version, HTML5, includes specifications for a video tag, that is meant to allow website developers to add a video to a page the same way they would add an image. In order for this to work, web browser developers (Mozilla, Webkit, Opera, etc.) have to build the video functionality into their browsers.

The W3C has created directions on how video should work in browsers, and it’s up to browser developers to follow those directions, so that video works the same across all browsers. This doesn’t always happen thanks to technology, legal, and financial choices made by browser developers, but so far no one’s varying too far from the specifications. However the specifications are still being changed and refined, so browsers developers have to keep up with that as well.

Playing video in a web page may not seem so special since you can already view video on a web page through plugins like Flash Player, Quicktime, Silverlight, and RealPlayer, however this is a big step forward for standardizing video playback across web browsers and devices. The goal is that in the future, developers will only need to use one method for embedding a video, that’s based on open standards (not controlled by one company), and it will work everywhere.

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

HTML5 Media Players

Create an Audio Player in HTML5 & CSS3

SublimeVideo

The first thing to note about this video player is that it still, as yet, not been released for general use. What the developers have set-up though is a pre-release demo for everyone to drool over. And drool over you will. It looks amazing and seems to works even better.

Ambilight for Video Tag

At first Ambilight looks like an average video player, the kind that loads standard HTML5 video. As the video plays, you very quickly notice what’s happening at the edges. The plugin automatically grabs the average colour in each area, and spreads it across the bounds of the video. This is not a new concept, as there have been hardware ambilights as well as Flash versions of the same. What makes this one special, is that it’s written entirely using HTML5.

Video JS

VideoJS is an HTML5 Video Player with 3 core parts: An embed code (Video for Everybody), a Javascript library (video.js), and a pure HTML/CSS skin (video-js.css).

YouTube HTML5 Player

This is an opt-in trial of HTML5 video on YouTube. If you are using a supported browser, you can choose to use the HTML5 player instead of the Flash player for most videos.

Vimeo HTML5 Player

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

Page 1 Page 2

We believe we are an exceptional team that works hard to do things the right way. We help designers and developers to find the good inspiration before create their works. If you would like to be kept up to date with our posts, you can follow us on Twitter, Facebook, Google+, or even by subscribing to our RSS Feed.

8 Responses to "10 Amazing HTML5 Media Player Implementations (Inspiration)"
  1. salman yousaf
    November 2, 2010 at 5:31 pm

    these players are really working so nicely

  2. joshman
    November 2, 2010 at 5:40 pm

    Look nice, thank you

  3. burman
    November 12, 2010 at 9:41 am

    Really the article is quite inspiring

  4. Gafitescu Daniel
    November 14, 2010 at 9:15 pm

    You have forgot about Open Standard Media (OSM) Player http://www.mediafront.org/project/osmplayer which is the best in my opinion.

  5. ahmad elshawardy
    December 17, 2010 at 6:21 pm

    it’s awesom players .. i love vimeo palyer to much and flare video player

  6. Simon
    January 7, 2011 at 12:46 am

    I suggest to ad DarkOnyx

    http://darkonyx.web-anatomy.com/en

    It’s free, it has got ad-support, external multi-channel playlist and its own CMS (where you edit your settings/videos/channels – no digging in the code).

  7. Robin
    February 12, 2011 at 5:27 am

    I was searching for such an post it was really a good post :)

Leave a Reply


Notify me of followup comments via e-mail. You can also subscribe without commenting.