Sunday, December 2, 2012

Select HTML5 Video/Audio Player

There are many HTML5 Video and audio players which support native HTML5 audio/video tags with flash/silverlight fallback to support non-modern browsers. Selecting appropriate player among a big list needs more research effort, so finding the right one for your web application depends on your web app requirement and design. Even your web app doesn't need support non-modern browsers, I still suggest to use one HTML5 media player because different browsers support different video/audio codecs.

Web app requirement and design usually include the following points:
1. Do you want a unified UI/API for native HTML5 and flash fallback?
2. Do you need this on iOS (or other mobile browsers)?
3. Do you need the skinnable player?
4. Do you need the player support both video and audio?
5. What kind of license do you accept?

Among the big list and google results, I finally referenced the below 3 links to narrow down my choices
http://praegnanz.de/html5video/
http://html5video.org/wiki/HTML5_Player_Comparison
http://websitesmaderight.com/2011/05/45-html5-media-players-tutorials-and-resources/ 

For Video
video.js (LGPLv3)
SublimeVideo (Service/licensed)
JW Player (Custom)
flowplayer (GPLv3/Commercial)

For Audio
audio.js (MIT)
SoundManager (BSD)

For both Video and Audio
mediaelement.js (GPLv2 & MIT)
jplayer.js (GPL/MIT))
pickle player (licensed/purchase)
jMediaelement(GPL/MIT)
html5media.info (CC BY-NC-ND 3.0)

I want to find a player to support both Video and Audio, license free, working on iOS and with different themes for visual happiness. From above shorter list, I probably go with mediaelement.js (Paul Irish also recommends this player).

3 comments:

  1. html5please.com also recommends mediaelement.js as audio/video fallback solution.

    ReplyDelete
  2. However, when I tried to use mediaelement.js to play movie/quicktime, it doesn't properly fallback to flash to play the movie, the same one can be well played in video.js. (Testing browser is Firefox)

    ReplyDelete
  3. http://www.jquery4u.com/html5-2/5-html5-video-jquery-plugins/ listed 5 video jquery plugins:
    1. FitVid JS
    2. jQPlayer
    3. jPlayer
    4. Bootstrap video player
    5. MediaElement.js

    ReplyDelete