Question

JS发生了什么事情

我没有id属性。没有它，它会工作吗？ id工作正常。

以下是我的以下HTML。它由out 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播放器。因为第二个也只替换第一个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玩家

1 个答案: