erhalten Sie das erste Video in Iframe mit Seitenumbruch mit youtube Daten API?

Question

Ich möchte nur das erste Video in iframe anzeigen, das von youtube Daten api und andere in Thumnail abgerufen wird. Es gibt 10 Datensätze auf jeder Seite auf der ersten Seite angezeigt, wenn die Seite zum ersten Mal geladen wird, aber wenn ich auf nächste klicke Seite dann das erste Video von zweiten Steckplatz nicht

gezeigt konnte ich nicht bekommen, was soll ich this.If Sie eine Lösung haben Sie zu tun, bitte sagen Sie mir

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

ja, ich habe Lösung dieser Frage . Die Lösung ist Sie müssen nur diese Codezeile hinzufügen und Problem wird

in index.php Datei, die Sie in der Art Tag hinzuzufügen haben gelöst werden.

.item{display: none;} 

und in script.js Datei, die Sie diese Zeile Code schreiben

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

     });