我只想在iframe中显示从youtube数据api检索到的第一个视频,而在thummail中显示其他视频。第一次加载页面时,第一页中的每一页上都显示了10条记录,但当我点击下一页时,第二个插槽的第一个视频没有显示
我不知道该怎么做。如果你有任何解决方案,请告诉我
function tplawesome(template, data) {
// initiate the result to the basic template
res = template;
// for each data key, replace the content of the brackets with the data
for(var i = 0; i < data.length; i++) {
res = res.replace(/{{(.*?)}}/g, function(match, j) { // some magic regex
return data[i][j];
});
}
return res;
}
var channelName= "TechGuyWeb";
$(document).ready(function(){
$.get("https://www.googleapis.com/youtube/v3/channels",{
part: 'contentDetails',
forUsername: channelName,
key:'AIzaSyBX94DoCYdtIwALVPfqSVar6izj3wCJ1M4'},
function(data){
console.log(data);
$.each(data.items,function(i, item){
var pid = item.contentDetails.relatedPlaylists.uploads;
//console.log(pid);
getVids(pid);
});
}
);
//var pid="10thStreetPreschool";
// function getvids(pid){
// $.get("https://www.googleapis.com/youtube/v3/playlistItems",{
// part: 'snippet',
// maxResults: 10,
// playlistId:pid,
// key:'AIzaSyBX94DoCYdtIwALVPfqSVar6izj3wCJ1M4'},
// function(data){
// var output;
// $.each(data.items,function(i, item){
// console.log(data);
// var v_id = item.snippet.resourceId.videoId;
// //alert(item.snippet.resourceId.videoId);
// //var video_title = item.snippet.title;
// //output= '<li>'+video_title+'</li>';
// $.get("item.html",function(data){
// $('#results').append(tplawesome(data, [{"title":item.snippet.title,"videoid":item.snippet.resourceId.videoId,"description":item.snippet.description}]));
// getcount(v_id);
// });
// //$('#results').append(output);
// });
// }
// );
// }
function getVids(pid, pageToken){
var data = {
part: 'snippet',
maxResults: 10,
playlistId: pid,
key: 'AIzaSyBX94DoCYdtIwALVPfqSVar6izj3wCJ1M4'
}
try{
if(pageToken){
data["pageToken"] = pageToken;
}
}catch(err){
}
$.get(
"https://www.googleapis.com/youtube/v3/playlistItems", data,
function(data){
$('#results').html("");
$.each(data.items,function(i, item){
console.log(data);
var v_id = item.snippet.resourceId.videoId;
// var total_results =data.pageInfo.totalResults;
// console.log(total_results);
pos =item.snippet.position;
//$('#thumbs').html("");
//alert(item.snippet.length);
$.get("item.html",function(data){
if(item.snippet.position==0){
$('#results').append(tplawesome(data, [{"title":item.snippet.title,"videoid":item.snippet.resourceId.videoId,"description":item.snippet.description}]));
}
//alert(item.snippet.thumbnails.default.url);
});
$('#thumbs').append('<div><img id="img_'+item.snippet.resourceId.videoId+'" src="'+item.snippet.thumbnails.default.url+'" height="120" width="90" onclick=show_video("'+item.snippet.resourceId.videoId+'")><h3 style="float: right;padding-right: 100px;">'+item.snippet.title+'</h3></div>');
getcount(v_id);
//$('#results').append(output);
});
$('#page').html("");
try{
if(data.prevPageToken){
$("#page").append('<span><a class="anc" href="javascript:void(0);" onclick="getVids('' + pid + '', '' + data.prevPageToken + '');">« Previous<a/></span>');
}
}catch(err){
}
try{
if(data.nextPageToken){
$("#page").append('<span><a class="anc" href="javascript:void(0);" onclick="getVids('' + pid + '', '' + data.nextPageToken + '');">Next »<a/></span>');
}
}catch(err){
}
});
}
function getcount(v_id){
$.get("https://www.googleapis.com/youtube/v3/videos",{
part: 'statistics',
id: v_id,
key:'AIzaSyBX94DoCYdtIwALVPfqSVar6izj3wCJ1M4'},
function(data){
$.each(data.items,function(i, item){
var views = item.statistics.viewCount;
//console.log(views);
$('#'+v_id).append(views);
});
}
);
}
});
// second function
function getVids(pid, pageToken){
var data = {
part: 'snippet',
maxResults: 10,
playlistId: pid,
key: 'AIzaSyBX94DoCYdtIwALVPfqSVar6izj3wCJ1M4'
}
try{
if(pageToken){
data["pageToken"] = pageToken;
}
}catch(err){
}
$.get(
"https://www.googleapis.com/youtube/v3/playlistItems", data,
function(data){
var output;
$('#results').html("");
$.each(data.items,function(i, item){
console.log(data);
var v_id = item.snippet.resourceId.videoId;
//alert(item.snippet.position);
//var video_title = item.snippet.title;
//output= '<li>'+video_title+'</li>';
var all_results = data.pageInfo.totalResults;
var res_per_page= Math.ceil(data.pageInfo.totalResults/10);
alert($(item.snippet.position+':first'));
$('#thumbs').html("");
$.get("item.html",function(data){
//$('#results').append(tplawesome(data, [{"title":item.snippet.title,"videoid":item.snippet.resourceId.videoId,"description":item.snippet.description}]));
//for(i=0;i<=res_per_page;i+10){
if(item.snippet.position==0){
$('#results').append(tplawesome(data, [{"title":item.snippet.title,"videoid":item.snippet.resourceId.videoId,"description":item.snippet.description}]));
//}
}
//$('#thumbs').append('<div><img id="img_'+item.snippet.resourceId.videoId+'" src="'+item.snippet.thumbnails.default.url+'" height="120" width="90" onclick=show_video("'+item.snippet.resourceId.videoId+'")></div>');
$('#thumbs').append('<div><img id="img_'+item.snippet.resourceId.videoId+'" src="'+item.snippet.thumbnails.default.url+'" height="120" width="90" onclick=show_video("'+item.snippet.resourceId.videoId+'")><h3 style="float: right;padding-right: 100px;">'+item.snippet.title+'</h3></div>');
getcount(v_id);
});
//$('#results').append(output);
});
$('#page').html("");
try{
if(data.prevPageToken){
$("#page").append('<span><a class="anc" href="javascript:void(0);" onclick="getVids('' + pid + '', '' + data.prevPageToken + '');">« Previous<a/></span>');
}
}catch(err){
}
try{
if(data.nextPageToken){
$("#page").append('<span><a class="anc" href="javascript:void(0);" onclick="getVids('' + pid + '', '' + data.nextPageToken + '');">Next »<a/></span>');
}
}catch(err){
}
});
}
function getcount(v_id){
$.get("https://www.googleapis.com/youtube/v3/videos",{
part: 'statistics',
id: v_id,
key:'AIzaSyBX94DoCYdtIwALVPfqSVar6izj3wCJ1M4'},
function(data){
$.each(data.items,function(i, item){
var views = item.statistics.viewCount;
console.log(views);
$('#'+v_id).append(views);
});
}
);
}
function show_video(vid){
$("#results").html("");
$('#results').append('<iframe id="player'+vid+'" class="yt_players" src="http://www.youtube.com/embed/'+vid+'?rel=0&enablejsapi=1;showinfo=0;&wmode=Opaque" width="560" height="315" frameborder="0" allowfullscreen></iframe>');
}
是的,我有这个问题的解决方案。解决方案是你只需要添加这行代码,问题就会得到的解决
在index.php文件中,您必须添加样式标记。
.item{display: none;}
在script.js文件中,您必须编写这行代码
$.get("item.html",function(data){
$('#results').append(tplawesome(data, [{"title":item.snippet.title,"videoid":item.snippet.resourceId.videoId,"description":item.snippet.description}]));
$('.item:first').css('display','block');
//$('#thumbs').append('<div><img id="img_'+item.snippet.resourceId.videoId+'" src="'+item.snippet.thumbnails.default.url+'" height="120" width="90" onclick=show_video("'+item.snippet.resourceId.videoId+'")></div>');
//$('#thumbs').append('<div><img id="img_'+item.snippet.resourceId.videoId+'" src="'+item.snippet.thumbnails.default.url+'" height="120" width="90" onclick=show_video("'+item.snippet.resourceId.videoId+'")><h3 style="float: right;padding-right: 100px;">'+item.snippet.title+'</h3></div>');
$('#thumbs').append('<div><img id="img_'+item.snippet.resourceId.videoId+'" src="'+item.snippet.thumbnails.default.url+'" height="120" width="90" onclick=show_video("'+item.snippet.resourceId.videoId+'")><div style="float: right;"><h2 style="padding-left: 10px;font-size: 18px;">'+item.snippet.title+'</h2></div><div style="margin-top:-72px;margin-left: 179px;"><h5 style="font-size: 16px;">'+item.snippet.description+'</h5></div><div style="margin-left:176px;margin-top: -14px;padding-top: 3px;padding-left: 4px;"><h5 style="font-size: 14px;margin-top: -5px;">Total Views: <span id=view_'+item.snippet.resourceId.videoId+'></span></h5></div></div>');
getcount(v_id);
});