Question

尝试实施播放列表功能以及收听历史记录。用户动态地拖放/排序播放列表的视频缩略图到div中。每次点击缩略图时，视频都会加载到播放器中，视频会添加到历史记录中（subHist.click()）。

因为视频是动态创建的，所以我无法创建事件监听器以在开始时转到下一个视频，并且必须稍后添加。问题是我在创建事件监听器的函数中有监听历史记录功能，因此当我们浏览播放列表时，事件监听器被调用的次数增加，这意味着当单击一次时，视频会在播放列表中多次出现

对于某些代码，这可能更有意义：

$('#Playlist').on('click', '.playlistYT', function(){
    $('#subHistory').click();
    videoID = $(this).attr("src").slice(27,38);
    $('#infoID').val(videoID);
    player.loadVideoById(videoID ); 
    var nextVideo = $(this).parent().next().find('.playlistYT');
    player.addEventListener('onStateChange', function stopCycle(event) {
    if (event.data == YT.PlayerState.ENDED) {
    $(nextVideo).click();
  }
});      
});

图像属于.playlistYT类，一旦被删除（即在删除任何视频之前该类不存在），$('#subHistory').click()会将视频添加到收听历史记录中。

如果我在var nextVideo内移动addEventListener，则它无法识别它（无法使用$(this)，因为它似乎将其重新定义为事件中的事件处理程序）。将$('#subHistory').click()移至stopCycle函数似乎没有任何区别。

花了几天时间玩.one，.off，.live，似乎无法破解它。 removeEventListener似乎也没有任何区别。我想过将一个隐藏的视频添加到播放列表中，但这会成为确保视频不会出现在用户中的问题。听历史/播放列表。

Answer 1

传递给事件监听器的onStateChange事件具有＆＃39;数据＆＃39;对象，但它也有目标＆＃39;表示引发事件的玩家的对象。因此，例如，您可以在初始化iFrame API时定义处理onStateChange的函数，并且在该侦听器函数中，您可以使用以下内容：

event.target.getVideoData().video_id

查找引发事件的播放视频的ID。根据您的示例代码，看起来知道视频ID可能会帮助您编写正确的jQuery选择器以查找DOM中视频的位置，然后从那里导航到下一个。因此，您的事件监听器只会被定义一次，但它将能够处理您应用的播放列表的动态特性。

添加事件处理程序以循环播放动态创建的播放列表（YouTube API）

1 个答案: