Javascript 如何使用Youtube API获取链接标题(而不仅仅是文本)?

Javascript 如何使用Youtube API获取链接标题(而不仅仅是文本)?,javascript,jquery,youtube,Javascript,Jquery,Youtube,我想在用户搜索视频时向他们显示“有链接的标题列表”,当他们单击链接时,应该在同一个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() { $("fo

我想在用户搜索视频时向他们显示“有链接的标题列表”,当他们单击链接时,应该在同一个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
        });
    }

函数tplawesome(e,t){res=e;for(var n=0;n搜索结果实际上并不包含指向视频的URL(仅包含指向缩略图的URL)。但是,它会返回“videoId”字段。这是播放视频所需的魔术键。您只需将videoId与此链接即可构造URL“”

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

etag=“\”jOXstHOM20qemPbHbyzf7ztZ7rI/sac7bhRUtt0cHYR4ntn0iH5E54U\”;
项目=(
{
etag=“\”jOXstHOM20qemPbHbyzf7ztZ7rI/o6DPa3ydgPLZK1l-83eAXJG97Xs\”;
id={
kind=“youtube#视频”;
videoId=JeQuelXsUYA;
};
kind=“youtube#searchResult”;
片段={
channelId=“UCjs0c_gIgDg7-3iroN7Qxfw”;
channelTitle=“”;
description=“…”;
liveBroadcastContent=无;
publishedAt=“2015-01-14T21:11:18.000Z”;
缩略图={
默认值={
url=”https://i.ytimg.com/vi/JeQuelXsUYA/default.jpg";
};
高={
url=”https://i.ytimg.com/vi/JeQuelXsUYA/hqdefault.jpg";
};
中等={
url=”https://i.ytimg.com/vi/JeQuelXsUYA/mqdefault.jpg";
};
};
title=“监视器颜色测试/监视器Farbtest(RGB/CMYK)(1080p)”;
};
},

谢谢你的回答!但是我把这些代码放在我的代码中的什么地方进行测试呢?
<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>
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)";
            };
        },