2016-07-20 10 views
1

YouTubeデータから取得した最初の動画のみを表示したい場合は、apiとその他のthumnail.Thereには、最初のページのすべてのページに表示される10個のレコードが最初に表示されます。正しく表示されますが、ページが第2のスロットの最初のビデオがyoutube data apiを使用してページネーションを使用してiframeの最初の動画を取得しますか?

が示されていない私は、私はあなたがすべてのソリューションを持っているthis.if行うために何をすべきことを得ることができませんでしたはい、私はこの質問の解決策を持っている私に

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 + '\');">&laquo; 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 &raquo;<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 + '\');">&laquo; 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 &raquo;<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>'); 
    } 

答えて

1

を教えてください。 ソリューションは、あなただけのコード行を追加すると、問題はあなたがスタイルタグに追加する必要がありますの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); 

     }); 
のこの行を記述する必要がファイル
関連する問題