如何通过API创建YouTube搜索

How to create youtube search through API

本文关键字：YouTube 搜索 创建 API 何通过      更新时间：2023-09-26

新手，第一个项目，我做得不太好。需要对显示查询标题的 youtube 视频进行简单搜索：

这是我的JS：

$(function() {
  $('#search-term').submit(function(event) {
    event.preventDefault();
    var searchTerm = $('#query').val();
    getRequest(searchTerm);
  });
});
function getRequest(searchTerm) {
  var params = {
    part: 'snippet',
    key: '',
    q: query
  };
  url = 'https://www.googleapis.com/youtube/v3/search';
  $.getJSON(url, params, function(data) {
    showResults(data.Search);
  });
}
function showResults(results) {
  var html = "";
  $.each(results, function(index, value) {
    html += '<p>' + video.snippet.title + '</p>';
    console.log(video.snippet.title);
  });
  $('#search-results').html(html);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <title>Youtube Project</title>
</head>
<body>
  <form id="search-term">
    Entry:
    <br>
    <input id="query" type="text">
    <br>
    <input type="submit" value="Submit">
  </form>
  <div id="search-results">
  </div>
</body>
</html>

对我放轻松，任何帮助都值得赞赏，这是jsfiddle：https://jsfiddle.net/jelane20/3hbrv12k/1/

知道了！

$(document).ready(function () {
    $('#search-term').submit(function (event) {
        event.preventDefault();
        var searchTerm = $('#query').val();
        getRequest(searchTerm);
    });
});
function getRequest(searchTerm) {
    var url = 'https://www.googleapis.com/youtube/v3/search';
    var params = {
        part: 'snippet',
        key: 'XXXXXX',
        q: searchTerm
    };
  
    $.getJSON(url, params, showResults);
}
function showResults(results) {
    var html = "";
    var entries = results.items;
    
    $.each(entries, function (index, value) {
        var title = value.snippet.title;
        var thumbnail = value.snippet.thumbnails.default.url;
        html += '<p>' + title + '</p>';
        html += '<img src="' + thumbnail + '">';
    }); 
    
    $('#search-results').html(html);
}

相关文章：