MediaElement.js stop all players

Question

I've been playing around with MediaElement.js for a while now and have a new application that uses 20 players on a single page. I'd like to be able to have the songs stop when another one is played - and not to overlap the tracks when they are playing. I can't seem to find an easy way to hack this - perhaps someone knows of a way?

Thanks.

Answer 1

In jQuery, you could do

$('video,audio').each(function() {
      $(this)[0].pause();
});

Let me know if that works.

Answer 2

A quick and dirty one ;)

$(".mejs-play").live('click',function(){
  $(".mejs-pause").trigger('click');                              
});

Answer 3

MediaElement.js creates a global object 'mejs' which has attribute 'players' which contains information about all players you`ve been created. Players are named mep_0, mep_1 etc.

If you are using underscore/lodash you can write something like

_.each(mejs.players, function(player) {
    player.media.stop();
});

If you need pure js code you can use 'for' operator

for (var player in mejs.players) {
    mejs.players[player].media.stop();
}

Answer 4

The easiest I found with jQuery:

$('video,audio').trigger('pause');

One-liner for the win! It also avoid JS errors because it doesn't target directly the elements, thanks jQuery.