Question

我所有的编码经验都是在较低级别的系统中，但我想学习一些html / js的东西，所以我很漂亮 - 你可能需要为我拼出一些东西。

我有三个文件，search.js，query.js和index.html

search.js：youtube数据API的修改版本。我真的只想要搜索结果的最高结果的视频ID。最终，我将使用该视频ID在Spotify应用中播放音乐视频。

// Called automatically when JavaScript client library is loaded.
function onClientLoad() {
    gapi.client.load('youtube', 'v3', onYouTubeApiLoad);
}

// Called automatically when YouTube API interface is loaded (see line 9).
function onYouTubeApiLoad() {
    // This API key is intended for use only in this lesson.
    // See http://goo.gl/PdPA1 to get a key for your own applications.
    gapi.client.setApiKey('MY API KEY HERE');
}

// Search for a specified string.
function search() {
  var q = document.getElementById('videoQuery');
  var request = gapi.client.youtube.search.list({
    q: q,
    part: 'snippet'
    type: 'video'
  });

  // run the search function and save the video id DOM
  request.execute(function(response) {
    var result_id = (response.items[0]).id;

    // result_id now holds the video id that we need to play. 
    document.getElementById('video_id').value = result_id;
  });
}

query.js：这个文件是我从头开始写的，所以如果我在这里做错了，请告诉我。我正在根据当前正在播放的曲目的信息构建搜索查询字符串。 Spotify应用程序API在这里被大量使用。

require([
    '$api/models'
], function(models) {
    'use strict';

    var youtubeQuery = function() {
        // We generate the youtube query by getting the track name and album name. 
        var videoQuery = models.player.track.name;
            videoQuery += " ";
            videoQuery += models.player.track.album.name;

        document.getElementById('videoQuery').value = videoQuery;
    };

    exports.youtubeQuery = youtubeQuery;  
});

index.html：我将youtube数据API示例中的html代码添加到spotify样板文件html文件中。我实际上并不希望用户看到搜索框，因为搜索应该是自动的。所以应该有一种方法可以很容易地隐藏html中的内容。最终我将添加一个占据了spotify应用程序允许区域的youtube播放器。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Vidify</title>
    <!-- Include the stylesheets you need for the Views components -->
    <!-- See https://developer.spotify.com/docs/apps/views/1.0/ -->
    <link rel="stylesheet" href="$views/css/image.css">
    <link rel="stylesheet" href="$views/css/list.css">
    <link rel="stylesheet" href="$views/css/buttons.css">
    <!-- <link rel="stylesheet" href="$views/css/throbber.css"> -->
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1></h1>

    <script src="scripts/main.js"></script>

    <script type="text/javascript" src="swfobject.js"></script>    
    <div id="ytapiplayer">
    You need Flash player 8+ and JavaScript enabled to view this video.
    </div>

    <script type="text/javascript">
    var URL = "http://www.youtube.com/v/";
        URL += document.getElementById('video_id');
        URL += "?enablejsapi=1&playerapiid=ytplayer&version=3"

    var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer" };
    swfobject.embedSWF(URL,"ytapiplayer", "425", "356", "8", null, null, params, atts);

    </script>




    <div id="buttons">
      <label> <input id="videoQuery" value="" type="text"/><button id="search-button" disabled onclick="search()">Search</button></label>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="auth.js"></script>
    <script src="search.js"></script>
    <script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>


  </body>
</html>

我的问题：

我很困惑如何让一切都在一起工作，但是我知道如何从youtube搜索中获取结果的视频ID字符串真的很有帮助。另外，我的js和html是否正确将查询提供给search.js文件？

如何获取热门youtube查询结果的视频ID？

0 个答案: