Custom MediaElement.js Skin

We needed a HTML5 audio and video polyfill and the best and most feature-rich we could find was MediaElement.js. We also wanted a player skin that was beautiful and usable and fell in love with Orman Clark’s audio player design. We coded the design and the result was a custom skin for MediaElement.js which we now share with you. You can download the skin below or see a demo of it in action:

Download View Demo

MediaElement.js is a polyfill for the HTML5 <audio> and <video> tags. It features a JavaScript API and a media player fully skinnable using CSS. It supports a variety of cutting-edge features that are specified in the new HTML5 implementation including resizable layout, full-screen playback, closed captions, subtitles and chapters and has fallback players for Flash and Siverlight for older browsers. The player is fully skinnable using CSS; the Flash and Silverlight fallbacks are just simple players with no controls and the playback is controlled with JavaScript using the so called MediaElement API so there is no need to hack into source files to make skins work in older browsers.

It is in our opinion the best HTML5 audio and video polyfill because not only because it is complete and feature-rich but because it decorates the actual <audio> and <video> tags instead of requiring its own custom HTML code like other ployfills do, so you can keep your code clean and semantic.

We hope you like and enjoy this skin and feel free to use it for both your personal and commercial projects with no attribution required.

UPDATE: This skin has been made into a WordPress Plugin, you can download it for free here. You need to install the Offical MediaElement.js Plugin first for the skin to work.

If you enjoyed this you may also like

Leave a Reply