从文件运行YouTube数据api：///

我正在创建一个webworks应用程序，因此我的代码未放置在服务器上。从本地文件系统访问时，youtube数据api不起作用，但它适用于我的应用程序。我需要一种解决方法，或者使用纯js制作本地专用Web服务器，而不需要命令行工具。从文件运行YouTube数据api：///

       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); 
}

来源

2017-05-31 SoLow Productions