mediaelement.js methods, properties and events

by Oleh Kotsubko

HTML

<link rel="stylesheet" href="http://mediaelementjs.com/js/mejs-2.8.2/mediaelementplayer.min.css">
<script src="http://mediaelementjs.com/js/mejs-2.8.2/mediaelement-and-player.min.js"></script>
<video src="https://www.youtube.com/embed/8eUStyE2rNY" class="player_1"></video>

JavaScript

var myPlayer = new MediaElementPlayer('.player_1', {
    success: function (mediaElement) {
        // properties need to refer the MEJS underlaying element
        console.log(mediaElement.paused); // return true
        console.log(mediaElement.muted); // returns false
        // same for events
        mediaElement.addEventListener('playing', function () {
            console.log("event triggered after play method");
        }, false);
        mediaElement.addEventListener('pause', function () {
            // set time at 90 seconds and unmute if player is paused
            // but wait 3 seconds before doing that
            // notice the previous time set (145 seconds)
            setTimeout(function () {
                // setters can refer MEJS underlaying element
                mediaElement.setCurrentTime(90);
                mediaElement.setMuted(false);
            }, 3000);
        }, false);
    }
});

// methods can refer the MEJS player
myPlayer.play();

// but not properties
console.log("paused? " + myPlayer.paused); // returns undefined
console.log("muted? " + myPlayer.muted); // returns undefined

// pauses, set time and mute after 5 seconds of playing
setTimeout(function () {
    myPlayer.pause(); // method
    // setters can also refer the MEJS player
    myPlayer.setCurrentTime(145);
    myPlayer.setMuted(true);
}, 5000);