从同一页面上的链接加载嵌入视频的最佳方式是什么(YouTube搜索/播放器API)

Question

我感谢您能为我提供的任何帮助。我相信我已经包含了迄今为止创建的所有必要的代码，这样所提供的背景将填补任何空白。

背景：学校作业要求我创建一个用户可以输入搜索的页面，然后通过服务器端的PHP将其发送到YouTube搜索URL(我很确定我本可以在同一页面上使用JS，但他们希望我使用ajax(，然后将结果加载到用户搜索的页面上。然后，用户应该能够点击其中一个链接，并将视频播放嵌入同一页面。

到目前为止：我已经通过Ajax成功地从php文件中获得了搜索数据，返回函数为搜索结果列表创建了html。

// send to php, if successful load video results from return info
$.ajax({
url: "ytSearch.php",
type: "post",
data: data,
success: function(response) {
// create list of search results on page using info 
// from "items" array in the search result
var searchResults = JSON.parse(response);
var videos = new Array();
videos = searchResults.items;
console.log(videos);
$("#ytVideo").append("<ul class='media-list ts-video-container>");
// possibly use 'a' element for search result to be clicked on
$.each(videos, function (key, value) {
$("#ytVideo").append("<a class='clickPlay'>"
//+ value.id.videoId + "'>"
+ "<li class='media btn-link youtube-video'>" 
+ "<img src=" + value.snippet.thumbnails.default.url
+ " alt='' class='img-responsive'>"
+ "<h5 class='ytList'>" + value.snippet.title + "</h5></br>"
+ "<p class='ytListDesc'>" + value.snippet.description
+ "</p></li></a>");
});
$("#ytVideo").append("</ul>");
},
error: function(jqXHR, textStatus, errorThrown) {
$('p.phpresults').html(textStatus, errorThrown);
}        
});

我还成功地在页面上的另一个div元素中加载了播放器，它正在工作。我把JS和这个标签分开了。

我需要能够点击搜索结果，访问该搜索结果的videoID属性，并将其发送到函数以在播放器中加载视频。这就是我试图找出最好的方法的地方。

我已经为搜索结果中的元素创建了一个事件侦听器，但我一直在思考如何通过它访问videoID属性，以便将其发送到Youtube Player API中的loadVideoById函数。

$(document).on("click", "a", function(){
console.log("click worked");

});

我正在考虑的一件事是：我是否应该为数据中的每个搜索结果创建对象，然后使用这些对象创建html来显示搜索结果？这会让我更容易访问这些对象和我需要发送给玩家的属性吗？

谢谢CK

Answer 1

这是通过添加全局"；数据-"；属性到每个搜索结果的元素，并引用YouTube搜索数据中的视频ID：

$.each(videos, function (key, value) {
$("#ytVideo").append(
"<li class='media btn-link youtube-video' data-videoid='" + value.id.videoId + "'>" 
+ "<img src=" + value.snippet.thumbnails.default.url
+ " alt='' class='img-responsive'>"
+ "<h5 class='ytList'>" + value.snippet.title + "</h5></br>"
+ "<p class='ytListDesc'>" + value.snippet.description
+ "</p></li>");

点击<li>元素时加载视频的脚本为：

$(document).on("click", "li", function(){
player.loadVideoById($(this).data('videoid'), 0);
});

CK