Question

我有一个页面，其中包含使用video.js框架的多个<video>玩家实例。我想在播放其中一个时暂停任何其他播放实例。或者，换句话说，当玩一个时，我希望所有其他人都能暂停。

顺便说一句：不幸的是，我在Wordpress环境中使用它，我不知道video.js元素的id，因为它是动态创建的。我也可以访问jquery。

html输出最终看起来像：

<video id="example_video_id_1984815762" class="video-js vjs-default-skin" width="350" height="198" poster="http://example.com/wp-content/uploads/2013/09/filename.jpg" controls preload="none" data-setup="{}">
    <source src="http://example.com/wp-content/uploads/2013/09/filename.mp4" type='video/mp4' />
</video>

我试过这个，但无济于事：

$('.filmWrapper a').click(function(){

    var vidId = $(this).find('video').attr('id');

    var myPlayer = videojs(vidId);

    myPlayer.on('play',function(){
    this.siblings().pause();
    });

    return false;

});

我很确定我是

这样做完全错了，
严重混淆了我的jquery和videojs。

这应该是一种常见的用法。有人能告诉我它是如何完成的吗？

Answer 1

您可以先尝试根据公共类获取所有ID，然后为每个ID分配事件以控制所有其他ID

沿着这些方向的东西（你可能需要稍微调整一下这个代码，但它会为你提供一个粗略的指导方针）：

var ids, length;
ids = new Array();
jQuery(".video-js").each(function() {
  ids.push(this.id);
});
length = ids.length;
for (var i = 0; i < length; i++) { // cycle through all the IDs
  var otherIDs = ids;
  videojs(ids[i]).on('play', function() { //the current ID
    otherIDs.splice(i, 1); //remove the current id from the otherIDs array
    for (var j = 0; j < length - 1; j++) { //cycle through the otherIDs array
       videojs(otherIDs[j]).pause(); 
    }
  });
});

在玩一个玩家时暂停其他玩家

1 个答案: