Индекс объекта и играть дальше с YouTube API

Я использую API YouTube для поиска видео YouTube. Видео будут отображаться на #searchBar с идентификатором видео ex. NJNlqeMM8Ns as data-video. Я получаю идентификатор видео, нажав на img:

<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");
}

Ответ 1

Я получил предложение получить player.current_video по ближайшему индексу li, поэтому я обновил свой тег 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').

Ответ 2

Вот рабочий 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....');
    }
}