YouTube数据API v3使用Javascript

YouTube Data API v3 Using Javascript

本文关键字：使用 Javascript v3 API 数据 YouTube      更新时间：2023-09-26

我对编写代码和使用API有点陌生。我不完全确定为什么我的程序没有按我希望的方式运行。

我想做的是在控制台中提供搜索结果，然后再转到我希望它下一步做的事情；然而，我认为没有任何东西被搜查。

据此：https://developers.google.com/youtube/v3/docs/search/list#http-请求，唯一需要的参数是"part"，所以我认为我做得对吗？但可能不会，因为据我所知，当我试图搜索一个术语时，没有搜索到任何内容。这是我的代码：

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <section>
        <form id="search-term">
            <p>Enter Name:<br/>
                <input id="query" type="text" name="Name"/><br/>
                <hr/>
                <input type="button" value="Enter here"/>
            </p>
            <div id="search-results">
            </div>
        </form>
    </section>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
</body>
</html>

JavaScript:

  $(document).ready(function(){
  $('#search-term').submit(function(event){
    event.preventDefault();
    var searchTerm = $('#query').val();
    getRequest(searchTerm);
  });

function getRequest(searchTerm){
  var params = {
    "q": "searchTerm",
    "part": 'snippet',
    "type": 'video',
    "key": 'I was advised to keep my key private, so I edited this part out'
  }
  url = 'https://www.googleapis.com/youtube/v3/search';
  $.getJSON(url, params, function(data){
    showResults(data.items);
   })
}
function showResults(results){
  var html = "";
  $.each(results, function(index,value){
    html += '<p>' + value.snippet.thumbnails.high.url + '</p>' + '<p>' + 'https://www.youtube.com/watch?v=' + value.id.videoId + '</p>' + '<hr/>';
    console.log(value.snippet.thumbnails.high.url);
    console.log(value);
  })
  $('#search-results').html(html);
}
})

您可能想要data.items而不是data.search

在他们的文档中列出的"响应"部分，我没有看到任何关于"搜索"参数的提及。请参阅此处的响应属性：https://developers.google.com/youtube/v3/docs/search/list#response

因此，如果您使用console.log(data);而不是data.search，您可能会看到一些输出

我建议您查看Google的Javascript API客户端库。这可能不是你最好的解决方案，但值得一试。在GitHub上下载

使用gapi.client.youtube.search.list: 的示例

// After the API loads, call a function to enable the search box.
function handleAPILoaded() {
  $('#search-button').attr('disabled', false);
}
// Search for a specified string.
function search() {
  var q = $('#query').val();
  var request = gapi.client.youtube.search.list({
    q: q,
    part: 'snippet'
  });
  request.execute(function(response) {
    var str = JSON.stringify(response.result);
    $('#search-container').html('<pre>' + str + '</pre>');
  });
}
相关文章：