如何讓多個玩家JW同一頁

Question

JS小提琴上發生了什麼

https://jsfiddle.net/n1tvx49x/1/

我沒有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播放器。因爲第二個也只是替換第一個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' 
});