Question

我正试图编写一个网站，以显示当前YouTube上排名前5的视频。它只会显示所有内容我在网上看到了一个非常相似的脚本，用于搜索视频（https://github.com/FriesFlorian/viralvideos/blob/master/js/app.js），然后对代码进行了建模。此外，我使用了来自这篇文章（Get youtube trends v3 country wise in Json?）的API输入信息

这是我收到的完整错误消息：

Uncaught TypeError: Cannot read property 'videos' of undefined
    at trend.js:8
    at dispatch (jquery-2.1.3.min.js:3)
    at r.handle (jquery-2.1.3.min.js:3)
(anonymous) @ trend.js:8
dispatch @ jquery-2.1.3.min.js:3
r.handle @ jquery-2.1.3.min.js:3
load (async)
add @ jquery-2.1.3.min.js:3
(anonymous) @ jquery-2.1.3.min.js:3
each @ jquery-2.1.3.min.js:2
each @ jquery-2.1.3.min.js:2
on @ jquery-2.1.3.min.js:3
(anonymous) @ trend.js:5
j @ jquery-2.1.3.min.js:2
fireWith @ jquery-2.1.3.min.js:2
ready @ jquery-2.1.3.min.js:2
I @ jquery-2.1.3.min.js:2

实际的gapi.client.youtube.videos.list似乎不是问题所在，因为我将其切换为gapi.client.youtube.search.list，但仍然出现错误。

function tplawesome(e,t){res=e;for(var n=0;n<t.length;n++) 
{res=res.replace(/\{\{(.*?)\}\}/g,function(e,r){return t[n] 
[r]})}return res}

$(function() {
console.log("run");
$(window).on("load", function(e) {console.log("runny");
   e.preventDefault();
   // prepare the request
   var request = gapi.client.youtube.videos.list({
        part: "contentDetails",
        chart: "mostPopular",
        regionCode: "IN",
        maxResults: 5,
        order: "relevance",
   }); 
   // execute the request
   request.execute(function(response) {
      var results = response.result;
      $("#results").html("");
      $.each(results.items, function(index, item) {
        $.get("tpl/item.html", function(data) {
            $("#results").append(tplawesome(data, 
[{"title":item.snippet.title, "videoid":item.id.videoId}]));
        });
      });
      resetVideoHeight();
   });
});

$(window).on("resize", resetVideoHeight);
});

function resetVideoHeight() {
    $(".video").css("height", $("#results").width() * 9/16);
}

function init() {
    gapi.client.setApiKey("AIzaSyC1U3lIrDYfK9slvPCFlbEnAx3IsmMNN10");
    gapi.client.load("youtube", "v3", function() {console.log("ran");});
}

<!-- language-all: lang-html -->
trending.html

 <!DOCTYPE html>
<html lang="en">
<head>      
    <title>YT Barebones</title>
    <meta charset="UTF-8" />                    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Awesome videos!" />
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="shortcut icon" type="image/png" href="/favicon.png"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <header>
        <h1 class="w100 text-center"><a href="index.html"><mark class="red">YouTube</mark> Barebones</a></h1>
        <p>For use on low-powered systems, i.e., Raspberry Pi's</p>
    </header>
    <h2 style="text-align:center;"><strong>Trending</strong></h2>
    <br>
    <div class="row">
    <div class="col-md-6 col-md-offset-3">
    <div id="results"></div>
    </div>
    </div>


    <!-- scripts -->
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <script src="https://apis.google.com/js/client.js?onload=init"></script>
    <script src="js/trend.js"></script>
</body>

item.html
<div class="item">
<h2 style="color: white;">{{title}}</h2>
<iframe class="video w100" width="640" height="360" src="//www.youtube.com/embed/{{videoid}}" frameborder="0" allowfullscreen></iframe>

我希望该网站显示该网站的标题部分，例如YT准系统等，以及视频标题和视频iframe。但是，它仅显示网站的标题部分，然后在控制台中返回错误。

Uncaught TypeError：无法读取未定义的属性“视频”

0 个答案: