javascript - 如何使用 Youtube API 获取链接标题(不仅仅是文本)？

Question

我想在用户搜索视频时向用户显示“具有链接的标题列表”，并且当他们单击链接时，它应该在同一 div 中播放

我遵循了一些教程，并使其在一个 div 中显示“标题和视频”。

像这样

function tplawesome(e,t){res=e;for(var n=0;n<t.length;n++){res=res.replace(/\{\{(.*?)\}\}/g,function(e,r){return t[n][r]})}return res}

    $(function() {
        $("form").on("submit", function(e) {
          e.preventDefault();
          // prepare the request
          var request = gapi.client.youtube.search.list({
                part: "snippet",
                type: "video",
                q: $("#media_search").val(),
                maxResults: 5,
                videoDuration: "medium",
                publishedAfter: "2000-01-01T00:00:00Z"

          }); 
          // execute the request
          request.execute(function(response) {
              var results = response.result;
               $("#youtube_results").empty();
              $("#youtube_results").html("");
               $.get("item.html", function(data) {
                $.each(results.items, function(index, item) {
                 $("#youtube_results").append(
                        tplawesome(data, [{"title":item.snippet.title, "videoid":item.id.videoId}]));
                });
               });
              resetVideoHeight();
          });
        });

        $(window).on("resize", resetVideoHeight);
    });

    function resetVideoHeight() {
        $(".video").css("height", $("#youtube_results").width() * 9/16);
    }

    function init() {
        gapi.client.setApiKey("My_key");
        gapi.client.load("youtube", "v3", function() {
            // yt api is ready
        });
    }

这是我的 HTML 代码

<form>
    <div class="form-group">
        <div class="input-group input-group-md" style="padding-top:37px;padding-bottom:10px;">
            <span>
                <i class="fa fa-language"></i>
            </span>
            <input type="text" class="form-control" placeholder="keywords" autocomplete="off" id="media_search">
                <span class="input-group-btn">
                    <input type="submit" value="search" class="form-control btn btn-default">
                </span>
           </div>
       </div>
 </form>
 <div class="panel panel-default">
     <div class="panel-body" id="youtube_results">
     </div>
 </div>

但是我必须做什么才能获得具有直接链接的标题(不仅仅是文本)？

例如，

我想显示像此网页这样的结果

http://www.rappad.co/editor

此网页的右侧，“搜索或附加媒体”部分显示标题列表，当您单击它时，它会立即播放视频。

Answer 1

搜索结果实际上并不包含视频的 URL(仅包含缩略图的 URL)。但是，它确实返回“videoId”字段。这是播放视频所需的魔法键。您只需将 videoId 与此“https://www.youtube.com/watch?v= ”连接即可构建 URL

请参阅下面的示例输出(这只是结果列表中的一个条目)

etag = "\"jOXstHOM20qemPbHbyzf7ztZ7rI/sac7bhRUtt0cHYR4ntn0iH5E54U\"";
    items =     (
                {
            etag = "\"jOXstHOM20qemPbHbyzf7ztZ7rI/o6DPa3ydgPLZK1l-83eAXJG97Xs\"";
            id =             {
                kind = "youtube#video";
                videoId = JeQuelXsUYA;
            };
            kind = "youtube#searchResult";
            snippet =             {
                channelId = "UCjs0c_gIgDg7-3iroN7Qxfw";
                channelTitle = "";
                description = “<long description> ...";
                liveBroadcastContent = none;
                publishedAt = "2015-01-14T21:11:18.000Z";
                thumbnails =                 {
                    default =                     {
                        url = "https://i.ytimg.com/vi/JeQuelXsUYA/default.jpg";
                    };
                    high =                     {
                        url = "https://i.ytimg.com/vi/JeQuelXsUYA/hqdefault.jpg";
                    };
                    medium =                     {
                        url = "https://i.ytimg.com/vi/JeQuelXsUYA/mqdefault.jpg";
                    };
                };
                title = "Monitor Color Test / Monitor-Farbtest (RGB/CMYK) (1080p)";
            };
        },