I have the following simple code that initiates the mediaelement audio plugin:

$('audio,video').mediaelementplayer({
    audioWidth: 300,
    audioHeight: 30
});

I need to track the playing event; I've tried the following code without any luck:

var player = document.getElementsById('player2');
player.playing = function(e) {
   alert('OMG! You played a song!');
}

I have the following simple code that initiates the mediaelement audio plugin:

$('audio,video').mediaelementplayer({
    audioWidth: 300,
    audioHeight: 30
});

I need to track the playing event; I've tried the following code without any luck:

var player = document.getElementsById('player2');
player.playing = function(e) {
   alert('OMG! You played a song!');
}

• javascript
• dom-events
• mediaelement.js

3 Answers 3

Try this:

# using jquery (on, bind, etc)...
$('#player1').bind('playing', function(e) { 
   console.log('bind - playing') 
});

# addEventListener 
var player = document.getElementById('player1'); 
player.addEventListener('playing', function(e) {
   console.log('addEventListener - playing') ;
});

Ok so I've figured it out...

$('audio,video').mediaelementplayer({
    audioWidth: 300,
    audioHeight: 30,

    success: function(mediaElement, domObject) {
        mediaElement.addEventListener('loadeddata', function() {
            console.log('addEventListener - loadeddata')            
        }, false);
    },
    error: function() {
        //alert('Error setting media!');
    }

});

A little late but had to solve this one myself. I noted that the MediaElement docs say that the success function first argument is a mediaElement object. It just so happens that the player html is wrapped inside a element, no matter what type of video it is. You can't access it directly as a jQuery object but a simple tweak fixes it all.

The following is used to fetch the closest player no matter which element you pass in

function getVideo(el) {
    var $el = $(el);

    if ($el.find('mediaelementwrapper').length) {
        return $el.find('mediaelementwrapper')[0];
    } else if ($el.parents('mediaelementwrapper').length) {
        return $el.parents('mediaelementwrapper')[0];
    }

    return $el.is('mediaelementwrapper') ? $el : false;
}

Notice we have to access it via [0] returning the document node rather than jQuery object.

But from there we can use it like this.

$video = getVideo('#playerID');

$video.addEventListener('playing', function () {
    debugger;
}, false);

Or do it without the helper

$video = jQuery('#playerID mediaelementwrapper')[0];