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

问题描述

感谢您能为我提供的任何帮助。我相信我已经包含了到目前为止创建的所有必要代码，以便所提供的背景可以填补所有空白。

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

到目前为止：我已经通过Ajax从php文件中成功获取了搜索数据，并且return函数为搜索结果列表创建了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函数。 / p>

    $(document).on("click","a",function(){

        console.log("click worked");
    
    });

我正在考虑的一件事：是否应该为数据中的每个搜索结果创建对象，然后使用这些对象创建html以显示搜索结果？这样可以更轻松地访问那些需要发送给播放器的对象和属性吗？

谢谢 CK

解决方法

这是通过为每个搜索结果的元素添加全局“ data-”属性，然后从YouTube搜索数据中引用videoId来完成的：

            $.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