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:
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.
Thank you !
Very cool! Thanks for an awesome plugin.
Is there no way to easily integrate the cool shadow the player has in your demo? why tease with it?
That’s just a background image applied to the player’s container. You can find it in Orman’s original PSD file or you can take it from the demo if you like. It’s not at all difficult to add but it’s not been added to the final skin because it would certainly not be a general user preference.
Splendid! Thanks
Nice skin!
Thank you 🙂
thank you! Very usefull!!!!!!!
Really awesome!
Thanks a lot for sharing 😀
Hi, I am not sure why but the plugin skins only the Video Player, the audio player still has the default skin :/
As you can see it’s working in the demo for the audio player as well. Do you have an example so we can take a look?
Yeah same here, once i updated MediaElement.js, it doesnt want to show the custom design just the default.
Hi, I have the same problem on a fresh WP 3.5.1 install. The skin does not apply to the audio player…
Thanks for fixing 🙂
The full screen button is forced on to a new line on the Google Nexus 7 tablet. Doesn’t look very good. Aside from that, very nice design! Love it!
Thank you for posting. I had to go digging for the right link for Clark’s audio player PSD file (http://www.premiumpixels.com/?s=audio+player).
Has the issue been resolved with regards to only customizing video and not audio (mp3) skins?
Note to your readers: as of WP 3.6, MediaElement.js is now part of WordPress core, so it’s not delivered via a plugin any more.
Accordingly I rewrote your PHP file as follows (follow the link), which is the minimum required to overwrite the default CSS/images with your lovely design!
http://pastebin.com/YN4nBAQc
As I said, it’s the minimum required, without options page or anything else, but it works!
-Alister
We are aware of this change. We will adapt the plugin to the new changes once 3.6 is released. Thank you for your contribution!
I got the pastebin code to work by deregistering the media elements styles set up in the core [sweat] ..
Add this before the wp_enqueue_style:
wp_deregister_style( 'mediaelement' );
wp_deregister_style( 'wp-mediaelement' );
Cheers
-Leo
How do I apply the new skin to a MediaElement.js audio player? Thanks!