javascript - 使用 youtube data api 获取带有分页的 iframe 中的第一个视频？

Question

我只想显示 iframe 中从 youtube 数据 api 检索的第一个视频和缩略图中的其他视频。第一次加载页面时，第一页中的每个页面上显示 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 + '\');">&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>');
    }

Answer 1

是的，我有这个问题的解决方案。解决方案是您只需添加这行代码即可解决问题

in index.php file you have to add in style tag.

.item{display: none;}

and in script.js file you have to write this line of code

$.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);

        });