对象索引和使用YouTube API播放下一个视频

Question

我正在使用YouTube API搜索YouTube视频。然后，这些视频将在#searchBar上显示，视频ID为NJNlqeMM8Ns，使用data-video属性。我通过点击img来获取视频ID：

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

在我对 JavaScript 的理解不够深入时，这个（this）就会出现。当我搜索视频时，会返回多个结果，也就意味着我会得到多个 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");
}  

- Unknown Potato

Answer 1

这里有一个可运行的 PEN (点击运行)。

该解决方案基于全局的 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....');
    }
}

- matrixb51

---

这个不起作用，因为当我到达播放下一个函数时，currentSongIndex++后返回NaN。 - Unknown Potato

我更新了PEN以添加一些基本的错误处理...请确保您的类_knapp_列表中至少有一个元素。 - matrixb51

Answer 2

我收到了一个建议，可以通过最接近的li索引获取player.current_video，因此我更新了我的data-video img标签。

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

然后我在编辑过的示例中更改了点击函数中的索引：

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

有了这个新功能，我能够选择并播放下一首歌！感谢 @cale_b 提供的 .closest('li') 建议。

- Unknown Potato