Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

mediaelement.js Multiple videos on same page?

I'm trying to put multiple videos up on a page, however when I click on one to play, they all play? Has anyone else experienced this?

Heres a snippet of the code im using

$("video,audio").mediaelementplayer({
    success: function (player, node) {
        player.pause();
    }
});

$('.mag_video .overlay_exit, .mag_video .overlay_bg').live('click', function () {
    var _this = this;
    $("video,audio").each(function () {
        $(this)[0].player.pause();
    })
});
like image 978
Graeme Paul Avatar asked Jan 23 '12 12:01

Graeme Paul


2 Answers

There is an option available to disable this behavior which is named 'pauseOtherPlayers', setting it to false will allow you to play multiple videos at the same time.

I adapted your exemple code :

$("video,audio").mediaelementplayer({
    pauseOtherPlayers: false,
    success: function (player, node) {
      player.pause();
     }
});
like image 149
MABeauchamp Avatar answered Nov 10 '22 13:11

MABeauchamp


That's because your jQuery selector is selecting all videos on the page. You want something more specific like:

$('#video1').mediaelementplayer({
    success: function (player, node) {
        player.pause();
    }
});


$('#video2').mediaelementplayer({
    success: function (player, node) {
        player.pause();
    }
});
like image 35
Steven Irby Avatar answered Nov 10 '22 15:11

Steven Irby