通过传递视频 ID（JS 和 Youtube API）从 youtube 搜索结果播放视频

Question

首先，我使用 javascript 和 youtube 数据 API 创建了一个 youtube 搜索引擎。然后我想通过单击来播放搜索结果中的视频。所以我为每个结果制作了一个按钮，将 videoID 变量传递给 playVideo() 函数（交换 iframe 链接并刷新它）。但是每个结果中的所有按钮都返回相同的视频 ID，即第一个结果的视频 ID。
如何解决这个问题？
这是我的代码：
谢谢你

//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>');
}

Answer 1

我通过检查这个相关的SO post 设法使它工作。这是我的部分代码：

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

初始代码很混乱，因为您的所有目标都具有相同的 id，我认为这只会获得第一个索引的值。在这个更新的代码中，即使它们仍然具有相同的 id 值，每个调用都会获得执行onclick 事件（索引）的属性。