Question

嗨我想只显示iframe中的第一个视频而缩略图中的其他视频。这是我的代码，您可以在localhost上运行它。如果您有任何解决方案，请回复我。

index.php文件

 <!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title>youtube Channel Videos</title>
    <style>
        body{
        background: #f4f4f4;
        font-family: "Arial" sans-serif;
        font-size: 14px;
        color: #666;
        }
        #container{
        width: 800px;
        overflow: auto;
        margin: auto;
        background: #fff;
        padding: 15px;
        }
        .anc{
            padding: 2px 6px;
            background: #EFF7FF;
            color: #069;
            border: 1px solid #C2D9EF;
            margin: 0px 0px 0px 5px;
            -moz-border-radius: 1px;
            -webkit-border-radius: 1px;
            text-decoration: none;
            text-align: center;
        }
    </style>
<!--    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">-->
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<!--     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>-->
    <script src="js/script.js"></script>


    </head>
    <body>

    <?php
    // put your code here
    ?>
    <div id="container">
        <h1>Youtube Videos</h1>
        <ul id="results">

        </ul>
        <div id="page" style="padding-top: 15px;padding-left: 42px;"></div>
    </div>

    <script>

    players = new Array();
//alert($("iframe.yt_players"));
function onYouTubeIframeAPIReady() {
    var temp = $("iframe.yt_players");    
    for (var i = 0; i < temp.length; i++) {
        var t = new YT.Player($(temp[i]).attr('id'), {
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
        players.push(t);
    }
}

 window.onload = setTimeout(onYouTubeIframeAPIReady, 10000);


function onPlayerStateChange(event) {

    if (event.data == YT.PlayerState.PLAYING) {
        var temp = event.target.a.src;
        var tempPlayers = $("iframe.yt_players");
        for (var i = 0; i < players.length; i++) {
            if (players[i].a.src != temp) players[i].stopVideo();

        }
    }
}

    </script>
    </body>
</html>

script.js文件

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){
            var output;
        $('#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);

        $.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);
    });
        $('#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 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.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);
    });
        $('#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);

    });
    }
    );
    }

item.html文件

<div class="item" style="padding-bottom: 30px;">
<iframe id="player{{videoid}}" class="yt_players" src="http://www.youtube.com/embed/{{videoid}}?rel=0&enablejsapi=1;showinfo=0;&wmode=Opaque" width="560" height="315" frameborder="0" allowfullscreen></iframe>
<div style="margin-bottom: -22px;margin-top: -20px;"><h2 style="font-size:18px;">{{title}}</h2></div>
<div style="margin-bottom: -18px;"><h5 style="font-size:16px;">{{description}}</h5> </div>
    <div><h5 style="font-size:14px;margin-top: -5px;">Total Views: <span id="{{videoid}}"></span></h5> </div>
</div>

如何在iframe和其他缩略图中显示第一个youtube视频？

0 个答案: