Воспроизведение видео из результатов поиска YouTube, передав идентификатор видео (JS & Youtube API) - PullRequest
Новая
       23

Воспроизведение видео из результатов поиска YouTube, передав идентификатор видео (JS & Youtube API)

0 голосов
/ 24 сентября 2018

Итак, во-первых, я создал поисковую систему YouTube, используя JavaScript и API данных YouTube.Затем я хотел воспроизвести видео из результатов поиска, нажав на них.Поэтому я сделал кнопку для каждого результата, которая передает переменную videoID в функцию playVideo () (которая меняет ссылку iframe и обновляет ее).Но все кнопки в каждом результате возвращают один и тот же идентификатор видео, который является идентификатором первого результата.Как это исправить?это мой код:спасибо 

//the search function
function search(){
    //clr results
    $('#results').html('');
    $('#buttons').html('');
    //get input val
    query = $('#query').val();
    //GET request on Youtube API V3
    $.get(
        "https://www.googleapis.com/youtube/v3/search",{
            part: 'snippet, id',
            q: query,
            type: 'video',
            key: my_apiKey},

            function(data){
                var nextPageToken = data.nextPageToken;
                var prevPageToken = data.prevPageToken;
                console.log(data);
                $.each(data.items, function(i, item){
                    //custom function to get request output
                    var output = getOutput(item);
                    $('#results').append(output);
                });
                //page buttons
                var buttons = pageBtn(prevPageToken, nextPageToken);
                $('#buttons').append(buttons);

            }
    );
}

//build the output
function getOutput(item){
    var vidId = item.id.videoId;
    var title = item.snippet.title;
    var img = item.snippet.thumbnails.high.url;

    var output ='<tr>' +
                '<td><img src="'+img+'" width="90px"/></td>'+
                '<td>'+title+' '+vidId+'</td>'+
                '<td><button id="play-video" data-url="http://www.youtube.com/embed/'+vidId+'?autoplay=1" onclick="playVideo();">Play</td>'+
                '</tr>';
    return output;
}
//play video
function playVideo(){
    var vidurl = $('#play-video').data('url');
    $("#player").html('<iframe type="text/html" width="640" height="390" src="'+vidurl+'" frameborder="0"></iframe>');
}

1 Ответ

0 голосов
/ 26 сентября 2018

Мне удалось заставить его работать, проверив это ТАК сообщение .Вот мой частичный код: 

vidIframe = '<button class="play-video" data-url="http://www.youtube.com/embed/'+item.id.videoId +'?autoplay=1" onclick="playVideo(this)">'+item.id.videoId +'</button>';


//play video
function playVideo(element){
    var vidurl = $(element).data('url');
    console.log(vidurl);
    $("#player").html('<iframe type="text/html" width="640" height="390" src="'+vidurl+'" frameborder="0"></iframe>');
}

Первоначальный код был сбит с толку, так как все ваши цели имеют одинаковый идентификатор, который, я думаю, получит только значение первого индекса.В этом обновленном коде, несмотря на то, что они по-прежнему имеют одинаковое значение идентификатора, каждый вызов получит атрибут того, который выполняет событие onclick (проиндексированное).

...