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使其能够正常工作。这是我的部分代码：

.exit

由于您的所有目标都具有相同的ID（我认为只会获取第一个索引的值），因此初始代码感到困惑。在此更新的代码中，即使它们仍然具有相同的id值，每个调用仍将获得执行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（JS和Youtube API）从youtube搜索结果中播放视频

1 个答案: