Youtube API：動態命名和循環

Question

我很抱歉，我對腳本編寫不太好，所以我希望這不是太基本的請求。

我處於這種情況，我需要有多個可循環點擊的YouTube視頻。我不想使用可嵌入播放列表循環選項，因爲它有幾秒鐘的黑色刷新播放列表中的視頻，在這種情況下，它將成爲它本身。

我在這裏找到一些文章，向您展示如何使用數據屬性動態創建多個視頻，以及如何在YouTube視頻中循環特定時間，但是當我嘗試合併這些時，出現錯誤，我認爲這是一個範圍問題，但不知道如何解決。以下是我的代碼，以及每個原創小提琴的鏈接。

我收到的錯誤是： 「未捕獲的ReferenceError：玩家沒有定義」 使用數據

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

多畫屬性示例： https://jsfiddle.net/nightcoregirl/jyha6xj5/

循環示例： http://jsfiddle.net/pbosakov/Lo6gwtff/

預先感謝任何一個isight！

Answer 1

您的具體問題是變量players的範圍。 在onPlayerReady中不可見。爲了取回event對象玩家，使用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> 

入住這fiddle