MediaElement.js

MediaElement.js HTML5 playerMediaElement.js provides free and open source HTML5 player. One file is displayed with the same UI in any browser using audio and video players in pure HTML and CSS. Its accessibility standards include WebVTT.

The main advantage of this particular plugin is the approach to those browsers that do not support HTML5. All browsers that cannot display <video> (e.g. older versions of IE) or do not support the .h264 codec (e.g. Firefox, Opera) get the same player using Flash and Silverlight. This plugins mimic the HTML5 MediaElement API, ensuring that multimedia content can be played in all browsers and devices (including iOS and Android) with a consistent UI. Although it is not a standard approach to dealing with the compatibility issue between different browsers, but definitely an effective one.

So regardless of what codecs and plugins browser supports, users receive a fully skinnable player with standard controls and features like support for the element, fullscreen video, internationalized subtitles, loop button, and even ambient background lighting effects. Player’s look is quite simple, but its open nature makes it easy to theme and customize.

There are MediaElement.js plugins for Drupal, Joomla, jQuery, BlogEngine.NET, ruby gem, typo3 and it is part of the WordPress Core. As for Plone CMS, there is collective.mediaelementjs - a simple integration of the player for Plone. When you install the package, all h.264 baseline encoded .mp4 and .mp3 files uploaded to your Plone website will automatically use a default view that renders the video or audio using the MediaElement.js player.

Taking into account its usability and compatibility, MediaElement.js is great solution if you need to add HTML5 media player functionality to your website or blog. Visit http://mediaelementjs.com for more information.

Follow