Wie mehrere JW Spieler auf der gleichen Seite

Question

JS Fiddle haben, was

geschieht

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

Ich habe keine id Attribut. Wird es ohne das funktionieren? Mit id funktioniert es gut.

Hier ist meine folgende HTML. Es besteht aus outer figure Tag und innerhalb, dass es div Tag und innerhalb, die eine andere div Tag mit class="jw-player" haben.

Ich kann nicht meine HTML ändern

<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> 

Ich möchte JWPlayer Videos innerhalb dieser beiden divs einzubetten. $node hat das figure Element ganz.

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

und andere

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

Ich bin nur ein JW Player auf meinem Bildschirm zu bekommen. Weil der zweite auch nur das erste div ersetzt. Und 2. div wird nicht geändert. Und wenn ich die beiden Instanzen auf der Konsole vergleiche, bekomme ich das Ergebnis als gleich.

player1 === player2 true

Answer 1

Sie könnten eine ID mit Hilfe von JavaScript, bevor Sie den Spieler zu schaffen hinzuzufügen.

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' 
});