Последний нажатый индекс + 1? - PullRequest
Новая
       14

Последний нажатый индекс + 1?

3 голосов
/ 22 сентября 2019

Я использую API YouTube для поиска видео YouTube.Видео будет отображаться на #searchBar с идентификатором видео ex.NJNlqeMM8Ns как 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");
}

Но я не уверен, как заставить это работать, как вы можете видеть в разделе, выделенном жирным шрифтом, могу ли я решить свою проблему следующим образом или мне нужнодругой подход?

Я попробовал следующее () предложение, но я думаю, что что-то не хватает для завершения обмена 

function playNext(){
player.current.videon = $(".knapp").next("[data-video]");
var video_idd = player.current.videon;
player.loadVideoById(video_idd, 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();
 playVideo();
});

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

Ответы [ 2 ]

0 голосов
/ 29 сентября 2019

Вот рабочий 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....');
    }
}
0 голосов
/ 22 сентября 2019

Вы должны использовать https://api.jquery.com/next/, чтобы просмотреть список, начиная с вашего текущего .

...