Question

使用YouTube API遇到一些问题并希望有人可以提供帮助。

这是我的代码：

HTML

<!doctype html>
    <html lang="en">
        <head>
            <title>Video App</title>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <meta name="description" content="Viral Videos App" />
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
            <link rel="stylesheet" href="css/style.css">
        </head>
    <body>
        <header>
            <h1 class="w100 text-center"><a href="index.html">Video</a>    </h1>
        </header>
    <div class="row">
    <div class="col-md-6 col-md-offset-3">
    <form action="#">
        <p><input type="text" id="Search" placeholder="Type here..." autocomplete="off" class="form-control" /></p>
        <p><input type="submit" value="Search" class="form-control btn btn-primary w100"></p>
    </form>
        <div id="results"></div>
    </div>
</div>

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

这是我的CSS

body { background: #1B2836; }
header { margin-top:30px; }
header a { color: #01FFBE; text-decoration: none; }
header a:hover { text-decoration: none; }
form { margin-top: 20px; }
form, #results {padding: 0 20px; }
.item { margin-bottom: 25px; }
.w100 { width: 100%; }

.btn-primary { background: #01FFBE; border-color: #00C693; }
.btn-primary:hover, .btn-primary:active, .btn-primary:focus { background: #00C693; border color: #00C693; }

这是我的Javascript

$(function() {
    $("form").on("submit", function(e) {
        e.preventDefault();
        // prepare the request
        var request = gapi.client.youtube.search.list({
        part: "snippet",
        type: "video",
        q: encodeURIComponent($("#search").val()).replace(/%20/g, "+"),
        maxResults: 3,
        order: "viewCount",
        publishedAfter: "2015-01-01T00:00:00Z"
    });
    // execute the request
    request.execute(function(response) {
       var results = response.result;
        $.each(results.items,  function(index, item) {
            console.log(item);
        });
    });
});
});

function init() {
gapi.client.setApiKey("AIzaSyDnp3yk0p6yWqpcK2iggS1WkwXMyEFYVvI");
 gapi.client.load("youtube", "v3", function() {
     //yt api is ready
 }); 
}

在我的实时预览中显示正常，我可以输入和搜索，但如果我打开控制台，则会出现错误。

努力使用api来吸引YouTube视频

0 个答案: