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