Youtube API: nommage dynamique et en boucle

Question

Je m'excuse d'avance, je ne suis pas très bon avec les scripts, donc j'espère que ce n'est pas trop basique d'une demande.

Je suis dans une situation où j'ai besoin d'avoir plusieurs vidéos YouTube en boucle cliquables. Je ne veux pas utiliser l'option de boucle de liste de lecture intégrable parce qu'elle a quelques secondes de noir où elle rafraîchit la vidéo dans la playlist, qui dans ce cas serait elle-même.

J'ai trouvé quelques articles ici qui vous montrent comment créer dynamiquement plusieurs vidéos en utilisant un attribut de données, et comment boucler des temps spécifiques dans une vidéo youtube, mais quand j'essaie de les combiner, j'obtiens une erreur, Ce que je suppose est un problème de portée, mais je n'ai aucune idée de comment réparer. Voici mon code, avec les liens vers chaque violon original.

L'erreur que je reçois est: "Uncaught ReferenceError: les joueurs ne sont pas définis"

<div style="position: relative;display:block;width: fit-content;margin:0 auto;"> 
<a href="#"><div style="width: 100%;height:100%;position:absolute;"></div> 
</a> 

<div class="video-container"> 
<div data-id="YE7VzlLtp-4"></div> 
</div> 
</div> 

<script src="https://www.youtube.com/iframe_api"></script> 

<script> 


function onYouTubeIframeAPIReady() { 
    var players = document.querySelectorAll('.video-container div') 
for (var i = 0; i < players.length; i++) { 


    new YT.Player(players[i], { 
    videoId: players[i].dataset.id, 
    events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
      }, 
    playerVars: { 
      'autoplay': 1, 
      'loop': 1, 
      'controls': 0, 
      'showinfo': 0, 
      'modestbranding': 1} 
}); 
} 
} 



function onPlayerReady(event) { 
loopStart(); 
players.playVideo(); 
} 
function loopStart() { 
players.seekTo(7); // Start at 7 seconds 
} 
function onPlayerStateChange(event) { 
if (event.data == YT.PlayerState.PLAYING) { 
    setTimeout(loopStart, 5000); // After 5 seconds, restart the loop 
} 
} 
</script> 

multiples vidéos à l'aide de données des attributs Exemple: https://jsfiddle.net/nightcoregirl/jyha6xj5/

Looping Exemple: http://jsfiddle.net/pbosakov/Lo6gwtff/

Merci d'avance pour tout isight!

Answer 1

Votre problème spécifique est la portée de la variable players. players n'est pas visible dans onPlayerReady. Pour récupérer le joueur de event objet, utilisez event.target:

Javascript

function onYouTubePlayerAPIReady() { 
    players = document.querySelectorAll('.video-container div') 
    for (var i = 0; i < players.length; i++) { 
    var player = new YT.Player(players[i], { 
     videoId: players[i].dataset.id, 
     events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
     }, 
     playerVars: { 
     'autoplay': 1, 
     'loop': 1, 
     'controls': 0, 
     'showinfo': 0, 
     'modestbranding': 1 
     } 
    }); 
    } 
} 

function onPlayerReady(event) { 
    loopStart(event.target); 
    event.target.playVideo(); 
} 

function loopStart(player) { 
    player.seekTo(7); // Start at 7 seconds 
} 

function onPlayerStateChange(event) { 
    if (event.data == YT.PlayerState.PLAYING) { 
    setTimeout(function() { 
     loopStart(event.target); 
    }, 5000); // After 5 seconds, restart the loop 
    } 
} 

HTML

<script src="https://www.youtube.com/iframe_api"></script> 
<div class="video-container"> 
    <div data-id="YE7VzlLtp-4"></div> 
</div> 
<div class="video-container"> 
    <div data-id="3IXKIVZ9T-U"></div> 
</div> 

Cocher cette fiddle