Question

我正在创建一个webworks应用程序，因此我的代码没有放在服务器上。从本地文件系统访问时，youtube数据api不起作用，但它是我的应用程序的工作方式。我需要一个解决方法，或者使用纯js创建本地私有Web服务器的方法，没有命令行工具。

                               html

<!DOCTYPE HTML>
<html>

  <head>
    <title>add song</title>
    <link type="text/css" href="../css/AS_Style.css" rel="stylesheet">
  </head>

  <body> 

    <div id="main">
      <p id="response">a</p>

      <form action="#">
        <p><input type="text" id="search" placeholder="Type something..." 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>



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="../js/AS.js"></script>  
    <script src="https://apis.google.com/js/api.js"></script>
    <script>
      function init() {
        gapi.client.init({
           'apiKey':'key here',
        });
        search();
        }
      gapi.load('client',init);
    </script>  

  </body>

</html>






                                JavaScript 

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 search() {
    $("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",
       }); 
       // execute the request
       request.execute(function(response) {
          var results = response.result;
          $("#results").html("");
          $.each(results.items, function(index, item) {
            $.get("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);
}

Answer 1

您能否显示用于调用Youtube API的代码？您可以使用纯javascript获取API数据：

var xhr = new XMLHttpRequest(); xhr.open("GET", "https://www.googleapis.com/youtube/v3/channels?part=contentDetails&id=CHANNEL_ID&maxResults=1&fields=items&order=date&key=API_KEY", false); xhr.send(); document.write(xhr.responseText);

您是否尝试通过javascript触发shell脚本，并使shell脚本运行API代码？

显然这很有效：https://stackoverflow.com/a/21484756/7922428

Answer 2

Youtube API无法连接到互联网，当您进行本地测试时，通过本地服务器完成。

以下是我的建议：

使用Nodejs
使用python -m SimpleHTTPServer

从file：///运行youtube数据api

2 个答案: