Mediaelement.js - HTML5 video with flash fallback

Mar 15th, 2014

Mediaelement.js is a cross-platform HTML5 / Javascript / CSS video embedding method which has Flash and Silverlight fallback. It is included in Wordpress, from what I hear. It has been in devlopment for quite a while. The documentation could be a little better though and it's hard to find a good tutorial on using the API. Here's the basic steps:

Download latest: http://mediaelementjs.com/

All the files that are needed are in the 'build' directory.

The CSS and JS files can go in whatever folder you want them in but by default, the Silverlight and Flash files must be in the same folder as the JS. I suppose the easiest way to do the directory structure is to rename the 'build' folder to something like mediaelement and just keep all the files in there. It might be tempting to organize the structure differently but it's probably not worth it (if you do it, make sure to test on all browsers to make sure they are picking up the plugins... ugh.) There is an option called 'pluginsPath' or something similar which is supposed to let you choose where to put the Flash and Silverlight files. The rest of the files are either CSS, JS, or assets called out from the CSS (I think... sorry, not 100% on this.)

Here's the basic way to create a video player and tap into the API.

$(document).ready(function() {
  var player = new MediaElementPlayer('#video', {
    clickToPlayPause: false,  
    autoRewind: false
  });
  player.play();
});

Two options are set: clickToPlayPause and autoRewind. It not really important for this tutorial to know what those particular options mean though. (clickToPlayPause is a boolean which sets whether or not clicking the video will play/pause and autoRewind is a boolean which sets whether or not the video should rewind to the beginning automatically when it reaches the end.) To see most of the available options, including ones I couldn't find documented, do

console.dir(player);

check the Chrome console and expand the player object. You'll see an object called 'options'. Expand that and you will see many of the defaults, all of which can be changed like in the example above.

To react on events using jQuery:

$('#video').on('ended', function() {
  alert('The video has ended.');
});

There is some 'hidden' documentation on the github site; look for links to the 'wiki' and the issue queue. It is very likely that the other folder besides the 'build' folder have more help. I'm not sure because with the information above, I was able to complete my project. No need to get crazy with the cheeze whiz, you know???

Article Type

General

Mediaelement.js - HTML5 video with flash fallback

Tags

Article Type