javascript - 对象索引并使用 youtube api 接下来播放

Question

我正在使用 youtube api 来搜索 youtube 视频。然后，视频将显示在 #searchBar 上，视频 ID 为 ex。 NJNlqeMM8Ns 作为数据视频。我通过按 img 获取视频 ID:

<img data-video = "{{videoid}}" src = "bilder/play.png" alt = "play" class = "knapp" width = "40" height = "40">

在我对 javascript 的了解很少的情况下，这变成了(这个)。当我搜索视频时，我会得到多个结果，这意味着我会得到多个 img 标签。

在这种情况下，我想在第一首歌曲播放完毕后播放下一首歌曲。当我按下 img 标签时，我尝试获取索引:

$(".knapp").click(function(){
    var index = $(".knapp").index(this);
    alert(index);
});

但是，当我在视频结束后提醒索引时，我总是得到 0 值。

所以我想我可以做这样的事情:

function onPlayerStateChange(event) {
   if (event.data == YT.PlayerState.ENDED){
    playNext();
   }
}

$('#searchBar').on('click', '[data-video]', function(){
player.current_video = $(this).attr('data-video');
playVideo();
});

function playVideo(){
var video_id = player.current_video;
player.loadVideoById(video_id, 0, "large");
}

function playNext(){
var player.current_videon = **$(this + 1).attr('data-video');**
var next_id = player.current_videon;
player.loadVideoById(next_id, 0, "large");
}

但我不确定如何让它发挥作用，正如您在粗体部分中看到的那样，我可以像这样解决我的问题还是需要其他方法？

编辑:经过一些研究，我发现我需要设置当前正在播放的视频的值，并且在视频播放完毕后我将这个数字加 1。然而，即使它确实播放了下一个视频，我也无法再选择我想要的歌曲......

    function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED){
    player.current_video++;
    playVideo();
}
}
var player = document.querySelector('iframe');
function onYouTubeIframeAPIReady() {
 player = new YT.Player('player', {
height: '390',
width: '640',
videoId: '40mSZPyqpag',
playerVars: {rel: 0},
events: {
  'onStateChange': onPlayerStateChange
}
});
player.current_video = 0;
}

$('#searchBar').on('click', '[data-video]', function(){
player.current_video = $(this).index();
alert(player.current_video);
playVideo();
});

function playVideo(){
var video_id = $('[data-video]').eq(player.current_video).attr('data-video');
player.loadVideoById(video_id, 0, "large");
}  

Answer 1

这是一个工作 PEN (click to RUN)

该解决方案基于全局 currentSongIndex 索引，不支持 next()

var currentSongIndex = null;

$(".knapp").click(function () {
    var index =  $(this).attr('data-video');
    playVideo(index);
});

function playVideo(index) {
    console.log("Playing song INDEX: " + index);
    currentSongIndex = index;
    playNext();
} 

function playNext() {
    currentSongIndex++;
    let nextSongIndex = $('img[data-video="' + currentSongIndex + '"]').attr('data-video');
    console.log("Next song INDEX: " + nextSongIndex);
    if(typeof nextSongIndex != "undefined") {
        playVideo(nextSongIndex);
    } else {
        console.log('end of list... you can play from index 1 or whatever....');
    }
}