video doesn't pause on iPad (using MediaElement.js)

Question

I have video playing in a modal window, and when I close the window, the video should stop playing. The following code works perfectly in every browser but iPad Safari:

videoModal.on("hidden", function(){
        console.log('window closed... stop video.')
        $('video, audio').each(function() {
          $(this)[0].player.pause();
        });
}

The problem, on iPad, is that the HTMLVideoElement doesn't have the property 'player'. Does anybody know why this would exist in every other browser except mobile Safari?

Thanks.

Answer 1

As, mediaelement.js insert global object called "mejs" inside the dom. we can play around this object and find out all the player currently on the page. once we get all the active players on the page, we can iterate through and pause each and every player. I have added the code snippet to achieve above explanation.

jQuery.each(mejs.players, function(key, val) {
    val.pause();
});

Answer 2

Was having the same problem. Solved it with a bit of a hack, triggering the pause button:

videoModal.on("hidden", function(){
    console.log('window closed... stop video.');
    $('video, audio').each(function() {
        $(".mejs-pause").trigger('click');
    });
}

Which I found here: MediaElement.js stop all players