javascript - Javascript YouTube API使缩略图可单击

Question

以下代码允许缩略图显示并可以单击，但是value.id.videoID参数不起作用，并将视频链接显示为“未定义”。如何获取videoID和YouTube URL，以便用户单击缩略图时将它们带到YouTube上的视频中:

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

function getRequest(searchTerm){
  var params = {
    part: 'snippet',
    maxResults: 8, 
    key: 'AIzaSyCo89pj5c21WfnyiC_LBSb9prU4oUu_o-w',
    q: searchTerm,
    type: 'video'
  };
  url = 'https://www.googleapis.com/youtube/v3/search';

  $.getJSON(url, params, function(data){
    showResults(data.items);
    console.log(data.items);
  });
}


function showResults(results){
  $.each(results, function(index,value){
    $('.search-results').append('<li class="results">' +     value.snippet.title + '<br/>' + '<a href="https://www.youtube.com/watch?v=' + value.id.videoID + '"><img class="thumbnail" src="' +value.snippet.thumbnails.medium.url+ '"></a>' + '<br/>' + value.snippet.description + '</li>');
console.log(value.snippet.title);
  });
}

Answer 1

使用videoId而不是videoID。

$('.search-results').append(
  '<li class="results">' +
  value.snippet.title +  '<br/>' + 
  '<a href="https://www.youtube.com/watch?v=' + 
  value.id.videoId +  //was videoID. changed to videoId.
  '"><img class="thumbnail" src="' + 
  value.snippet.thumbnails.medium.url+ '"></a>' + '<br/>' + 
  value.snippet.description + '</li>'
);