添加事件处理程序循环通过动态创建的播放列表（YouTube API） [英] Adding event handler to loop through dynamically created playlist (YouTube API)

问题描述

尝试实现播放列表功能以及聆听历史记录。播放列表视频的缩略图由用户动态拖动/删除/排序为div。每次点击缩略图时，视频都会加载到播放器中，并将视频添加到历史记录中（ subHist.click（））。

由于视频是动态创建的，我无法创建事件侦听器，以开始前进到下一个视频，并且必须稍后添加。这个问题是我在创建事件侦听器的函数内有侦听历史功能，所以当我们浏览播放列表时，事件侦听器被调用越来越多次，这意味着只有在点击一次时，视频会出现在播放列表中多次

这可能会使某些代码更有意义：

  $ （'#Playlist'）。on（'click'，'.playlistYT'，function（）{
 $（'＃subHistory'）。click（）; 
 videoID = $（this） （src）。slice（27,38）; 
 $（'＃infoID'）。val（videoID）; 
 player.loadVideoById（videoID）; 
 var nextVideo = $这个）.parent（）。next（）。find（'。playlistYT'）; 
 player.addEventListener（'onStateChange'，function stopCycle（event）{
 if（event.data == YT。 PlayerState.ENDED）{
 $（nextVideo）.click（）; 
} 
}）; 
}）; 
  

图像是类 .playlistYT 一旦它们被删除（即，这个类在任何视频被删除之前不存在）和 $（'＃subHistory'）。click（）它将视频添加到收听历史。

如果我在 addEventListener var nextVideo >，那么它不会识别它（不能使用 $（this），因为它似乎重新定义到事件处理程序中的事件）。移动 $（'＃subHistory'）。click（）到 stopCycle 函数似乎没有区别。 p>

过去几天玩了一个.one，.off，.live，似乎没有破解。 removeEventListener 似乎没有任何区别。我想到添加一个隐藏的视频到播放列表，但那就成为一个问题，确保视频没有出现在用户的听力历史/播放列表。

解决方案

传递给事件侦听器的 onStateChange 事件具有data对象，但它也有target对象，表示提出事件的玩家。所以例如，您可以定义在初始化iFrame API时处理onStateChange的函数，并且在该监听器函数中，可以使用以下内容：

 code> event.target.getVideoData（）。video_id 
  

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

Attempting to implement a playlist function along with a listening history. Thumbnails of videos for the playlist are dynamically dragged/dropped/sorted by the user into a div. Each time a thumbnail is clicked, the video is loaded in the player and the video is added to the history (subHist.click()).

Because the videos are dynamically created, I cannot create the event listener to move on to the next video at the beginning, and have to add it later. The problem with that is I have the listening history function within the function that creates the event listener, so the event listener is called increasing number of times as we go through the playlist, meaning a video appears multiple times in the playlist when clicked only once.

This might make more sense with some code:

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

The images are of the class .playlistYT once they are dropped (i.e. this class does not exist before any videos are dropped), and $('#subHistory').click() which adds the video the listening history.

If I move the var nextVideo within the addEventListener, then it does not recognise it (can't use $(this) as it seems to redefine that to the event within the event handler). Moving $('#subHistory').click() to the stopCycle function seems to make no difference.

Spent past couple of days playing around with .one, .off, .live, can't seem to crack it. removeEventListener doesn't seem to make any difference, either. I thought of adding a hidden video to the playlist but that then becomes a question of making sure that video doesn't appear in users' listening history/playlists.

解决方案

The onStateChange event that is passed to the event listener has the 'data' object, but it also has the 'target' object that represents the player that raised the event. So for example, you could define the function that handles onStateChange when you initialize the iFrame API, and within that listener function, you could use something like:

event.target.getVideoData().video_id

To find the ID of the playing video that raised the event. Based on your sample code, it looks like knowing the video ID may help you write the proper jQuery selector to find where in your DOM the video is, and then navigate to the next one from there. Hence your event listener will only be defined once but it will be able to handle the dynamic nature of your app's playlist.

这篇关于添加事件处理程序循环通过动态创建的播放列表（YouTube API）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！