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.
In jQuery, you could do
$('video,audio').each(function() {
$(this)[0].pause();
});
Let me know if that works.
A quick and dirty one ;)
$(".mejs-play").live('click',function(){
$(".mejs-pause").trigger('click');
});
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();
}
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.