如何在同一页面上有多个 JW 播放器

Question

JS Fiddle 正在发生的事情

我没有 id 属性。没有那个它会工作吗？使用 id 它工作正常。

这是我的追随者 HTML。它由外部 figure 标签和内部 div 标签组成，内部还有另一个 div 标签 class="jw-player".

我无法改变我的 HTML

<figure data-embed-type="jwplayer" data-embed-url="video-url1" data-embed-loaded="false">
  <div itemscope="" itemtype="http://schema.org/VideoObject">
    <div data-embed-url="video-url1" class="jw-player"></div>
  </div>
</figure>

<figure data-embed-type="jwplayer" data-embed-url="video-url2" data-embed-loaded="true">
  <div itemscope="" itemtype="http://schema.org/VideoObject">
    <div data-embed-url="video-url2" class="jw-player"></div>
  </div>
</figure>

我想在这两个 div 中嵌入 JWPlayer 视频。 $node 有 figure 个元素。

    var videoObject = $node.querySelector('.jw-player');      
    var playerInstance = window.jwplayer(videoObject);
    window.player1 = playerInstance;
    playerInstance.setup({
      file: 'video-url1',
      mediaid: 'asd34',
      image: 'jpg-url1'
    });

还有一个

  var videoObject = $node.querySelector('.jw-player');
  var newplayerInstance = window.jwplayer(videoObject);
  window.player2 = newplayerInstance;
  newplayerInstance.setup({
    file: 'video-url2',
    mediaid: 'asder3',
    image: 'jpg-url2'
  });

我的屏幕上只有一个 JW Player。因为第二个也仅替换第一个 div。第二个 div 没有改变。当我在控制台上比较这两个实例时，我得到的结果是相等的。

player1 === player2 true

Answer 1

您可以在创建播放器之前使用 JavaScript 添加 ID。

var videoObject = document.querySelector("div[data-embed-url='video-url1']");
videoObject.id = "player-1";
var newplayerInstance = window.jwplayer(videoObject);
window.player2 = newplayerInstance;
newplayerInstance.setup({
  file: 'video-url2',
  mediaid: 'asder3',
  image: 'jpg-url2'
});

var videoObject = document.querySelector("div[data-embed-url='video-url2']");
videoObject.id = "player-2";
var newplayerInstance = window.jwplayer(videoObject);
window.player2 = newplayerInstance;
newplayerInstance.setup({
  file: 'video-url2',
  mediaid: 'asder3',
  image: 'jpg-url2'
});

如何在同一页面上有多个 JW 播放器

How to have multiple JW players on same page

javascript

jwplayer