Play all the things.
JavaScript CSS ActionScript HTML C# Ruby
Pull request Compare This branch is 1534 commits ahead, 3569 commits behind mediaelement:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

A better mediaelement for Drupal 7

<video> and <audio> made even easier.

This library is an optimized build of mediaelement.js that includes everything you need to implement a basic mediaelement player and nothing you don't.

Additional features and plugins that aren't part of the standard build can be easily added by uncommenting the feature in grunt/concat and rebuilding the script.

All i18n features have been removed from the standard build in favor of passing the needed language features as parameters from Drupal.

Improvements in filesizes are a result of excluding unnecessary plugins from the build process and using less/more specific css selectors.

Customization & Configuration

Project Structure

/src/ : Editable assets that will be compiled & processed into /local-build/.

/local-build/ : Compiled assets that have yet to be tested.

/build/ : Compiled assets used in production.

/grunt/ : Configuration files of grunt tasks.

Available Grunt tasks:

  • grunt : Compiles all /src/ assets to /local-build/.

  • grunt style : Compiles css & newer image assets to /local-build/.

  • grunt build : Copies the /local-build/ to /build/.


Sass is the preferred method of styling - css may be edited directly, but isn't recommended. Styles are broken up into partials in the /inc/ directory for easier inclusion/exclusion of needed elements.

!important styles should be avoided-

Compass, Autoprefixer, CSSComb, and CSSMin will be run as part of the grunt & grunt style tasks.


Extend the player's functionality by uncommenting the desired plugins in /grunt/concat.js and rebuild the script.

How it Works:

Many great HTML5 players have a completely separate Flash UI in fallback mode, but MediaElementPlayer.js uses the same HTML/CSS for all players.

MediaElement.js is a set of custom Flash and Silverlight plugins that mimic the HTML5 MediaElement API for browsers that don't support HTML5 or don't support the media codecs you're using. Instead of using Flash as a fallback, Flash is used to make the browser seem HTML5 compliant and enable codecs like H.264 (via Flash) and even WMV (via Silverlight) on all browsers.

<script src="imediaelement/build/mediaelement.js"></script>
<video src="myvideo.mp4" width="320" height="240"></video>

var v = document.getElementsByTagName("video")[0];
new MediaElement(v, {success: function(media) {;