为同一页面上的多个 video.js 玩家添加事件监听器

Question

我在同一页面上添加了多个 videojs 元素，我想对它们使用相同的事件。我试图将它们加载到一个新数组中，但无法正常工作。你能帮我解决这个问题吗？

var myPlayers = Array(_V_("video1"), _V_("video2"));
myPlayers.ready(function () {
   var myPlayer = this;
   myPlayer.on("pause", function () {
      $('#'+myPlayer+' #accordion-section-title').removeClass('playing');
   });
   myPlayer.on("play", function () {
      $('#'+myPlayer+' #accordion-section-title').addClass('playing');
   });
 });

Answer 1

数组不继承其成员的方法，因此您不能简单地对数组调用 ready()。您需要遍历它，然后对每个元素进行操作。

您还应该使用 videojs 播放器的 id() 方法获取播放器 ID 以构建 jQuery 的选择器。

var myPlayers = Array(videojs("video1"), videojs("video2"));
myPlayers.forEach(function (player) {
  player.on("pause", function () {
    $('#'+ player.id() +' #accordion-section-title').removeClass('playing');
  });
  player.on("play", function () {
    $('#'+ player.id() +' #accordion-section-title').addClass('playing');
  });
});

请注意，我还将已弃用的 _V_ 替换为 videojs。

为同一页面上的多个 video.js 玩家添加事件监听器

Add event listeners to multiple video.js players on the same page

javascript

events

video.js