Site icon WebDevStudios

Customizing MediaElement.js for WordPress

Lisa Sabin-Wilson

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.

Exit mobile version