0

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

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

});

我很确定我是

  1. 这样做完全错误，并且
  2. 把我的 jquery 和 videojs 的东西搞混了。

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

4

1 回答 1

1

您可以尝试首先根据它们的公共类获取所有 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(); 
    }
  });
});
于 2013-09-24T05:28:23.080 回答