通过传递视频 ID 从 youtube 搜索结果播放视频 (JS & Youtube API)
playing video from youtube search result by passing the video ID (JS & Youtube API)
所以,首先,我使用 javascript 和 youtube 数据 API 创建了一个 youtube 搜索引擎。然后我想通过单击播放搜索结果中的视频。所以我为每个结果创建了一个按钮,将 videoID 变量传递给 playVideo() 函数(交换 iframe link 并刷新它)。但是每个结果中的所有按钮 returns 相同的视频 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>');
}
我设法通过检查这个相关的 使其工作。这是我的部分代码:
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
事件(索引)的属性。
所以,首先,我使用 javascript 和 youtube 数据 API 创建了一个 youtube 搜索引擎。然后我想通过单击播放搜索结果中的视频。所以我为每个结果创建了一个按钮,将 videoID 变量传递给 playVideo() 函数(交换 iframe link 并刷新它)。但是每个结果中的所有按钮 returns 相同的视频 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>');
}
我设法通过检查这个相关的
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
事件(索引)的属性。