MediaElement.js is a JavaScript library that gives you video and audio play capabilities based on the HTML5 specifications. It includes a Flash wrapper for browsers that don’t support certain codecs or that don’t support the HTML5 <audio> and <video> tags.
MediaElement.js has come packaged with WordPress core since version 3.6. The MediaElement.js API page gives a good introduction to installing the library and including it in a project. However, examples on how use and extend it are lacking. The easiest way to extend MediaElement is to connect with the event listeners that it includes.
Initializing MediaElement
There are three ways to initialize MediaElement:
jQuery
$('video').mediaelementplayer();
This is the most basic way to initialize it, and works well if you have a large number of videos and don’t need to reference them very often. You can still change any of the options by passing arguments to mediaelementplayer(), but to refer to the player again you’ll have to use jQuery to search the DOM and find the element(s), which can be slow.
Create a MediaElement
var x = new MediaElement( 'id', {} );
This initializes the media component of MediaElement.js, without adding the player.
Create a MediaElementPlayer
var x = new MediaElementPlayer( '#id', {} );
This initializes MediaElement for an element, and gives you a variable which you can easily reference later (we’ll explore this in the example below). I’ve found that this is the most effective way to work with MediaElement.
Callbacks
This is where you can add on to the functionality of the media player. When initializing the player, there is a “success” callback which is where code can be added once the player is initialized. Inside the success callback function, you can add listeners to any of the events that MediaElement.js provides (see the API documentation for a list of the events):
var video = new MediaElementPlayer( '#playerID', {
success: function (mediaElement) {
mediaElement.addEventListener( 'playing', function( e ) {
console.log( 'video is playing' );
}, false);
}
});
An Example
The most recent project I did with MediaElement.js involved a video with a custom overlay. The overlay showed different text before the video started, when it was paused, and when it was finished. To accomplish this, I wrote markup for the video player to be inside the overlay container, with the overlay text following it:
<div class="video-overlay" id="video-overlay">
<div class="video-player">
<video width="940" height="524" id="video-player" class="about-video">
<source type="video/mp4" src="VIDEOFILE.mp4" />
</video>
</div>
<div class="overlay-text">
<p class="initial-text">Start Video</p>
<p class="paused-text">Resume</p>
<p class="ended-text">Replay</p>
</div>
</div>
and styled them:
.video-overlay {
position: relative;
overflow: hidden;
}
// Display: none for the overlay text unless the .video-overlay-visible is added later
.overlay-text {
display: none;
position: absolute;
top: 20%;
left: 0;
width: 100%;
text-align: center;
color: #fff;
z-index: 999;
}
// The .video-overlay-visible class gets added to the container later with JS
.video-overlay-visible:before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #906497;
background: rgba(144, 100, 151, 0.5);
z-index: 998;
}
.video-overlay-visible.initial .inital-text {
display: block;
}
.video-overlay-visible.paused .paused-text {
display: block;
}
.video-overlay-visible.ended .ended-text {
display: block;
}
Once our markup for the media player and overlays are in place, we’ll start the media player and add event listeners to show the appropriate overlays:
jQuery(document).ready(function() {
$videoOverlay = jQuery(".video-overlay");
var isPlaying = false;
var player = new MediaElementPlayer( '#video-player', {
success: function( mediaElement ) {
// Show the initial overlay once the media player is set up
$videoOverlay.addClass('video-overlay-visible initial);
// The overlay is on top of the player, so we have to make it respond to clicks
$videoOverlay.click( function() {
if ( false === isPlaying ) {
player.play();
}
});
// Event listener for when the video starts playing
mediaElement.addEventListener( 'playing', function( e ) {
$videoOverlay.removeClass( 'video-overlay-visible initial paused ended’ );
isPlaying = true; //keep track of if it’s playing or not
}, false);
// Event listener for when the video is paused
mediaElement.addEventListener( 'pause', function( e ) {
$videoOverlay.addClass( ‘video-overlay-visible paused' );
isPlaying = false;
}, false);
// Event listener for when the video ends
mediaElement.addEventListener( 'ended', function( e ) {
$videoOverlay.addClass( 'video-overlay-visible ended' );
isPlaying = false;
}, false);
}
} );
} );
Conclusion
When displaying media on a website, MediaElement is a very useful tool.
Hopefully this guide will help you start adding on to its default functionality and give you some ideas to expand on.
Thanks for sharing that information -but one thing confuses me:
var video = new MediaElementPlayer( ‘#playerID’, { …
What is the ‘#playerID’? Do we need to pass an id of an existing player? And if so, where to find that id?
Each time I run your first code (check if playing) the JS console says:
“TypeError: d.node is undefined mediaelement-and-player.min.js:27:2331”
Thanks for the amazing information. I am not sure if my query is related to this article or not?
I am trying to disable right click for YouTube Live source. And this is the custom-js code I have tried before:
jQuery(document).ready(function ($) {
$(‘video.vjs-tech’).on(‘contextmenu’, function (e) {
e.preventDefault();
});
jQuery(function ($) {
//Force show MediaElement player overlay
setInterval(function () {
$(‘.mejs-layers .mejs-overlay.mejs-layer’).eq(1).show();
}, 5000);
});
Previously it worked but now it doesn’t. Please, can you help me?