电影预告片 youtube search_query答案

【问题标题】：movie trailer youtube search_query电影预告片 youtube search_query
【发布时间】：2017-01-25 21:47:38
【问题描述】：

谁能告诉我如何获得我的 ?search_query=SEARCH 的第一个 youtube 视频链接结果例子： https://www.youtube.com/results?search_query=hangover+2009+trailer

第一个结果链接是： https://www.youtube.com/watch?v=tcdUhdOlz9M

谁能告诉我如何用 jquery 做到这一点？我愿意根据 search_query 获取 youtube 的电影预告片链接。

因为这个链接之后可以在 iframe 中使用以显示在我的页面中。

<iframe width="560" height="315" src="https://www.youtube.com/embed/tcdUhdOlz9M" frameborder="0" allowfullscreen></iframe>

谢谢！！

【问题讨论】：

请使用服务器。如果您不知道如何构建自己的服务器，请使用diff bot

标签： javascript jquery youtube-api youtube-javascript-api

【解决方案1】：

这很简单。将代码与 Youtube API 集成后，它将返回一个类似结果的对象，您可以使用 API 设置几乎所有内容（结果数量、日期等）。因此，在此基础上，您可以随意塑造它。

下面是一个带有一些结果处理的jQuery示例：

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() {
    $("#search-btn").on("click", function(e){
       e.preventDefault();
        //prepare the request
        var request = gapi.client.youtube.search.list({
            part: "snippet",
            type: "video",
            q: encodeURIComponent($("#input-search").val()).replace(/%20/g, "+"),
            maxResults: 6,
            order: "viewCount",
            publishedAfter: "2015-01-01T00:00:00Z"
        });
        request.execute(function(response){
            var results = response.result;

            function getMonth(monthNumber){
                var monthName = ['jan', 'fevereiro', 'mar', 'abr', 'mai', 'jun', 'jul', 'ago', 'set', 'out', 'nov', 'dez'];

                return monthName[monthNumber-1];
            }

            var dateUTC = results.items[0].snippet.publishedAt;
            var year = dateUTC.substring(0,4);
            var day = dateUTC.substring(8,10);
            var month = dateUTC.substring(5,7);
            month = getMonth(month);

            var finalDate = day + " de " + month + " de " + year;


            console.log("passou", results.items[0].snippet.description);
            //$.each(results.items, function(index, item){
            $.get("youtube/item", function(data){ 
                $("#results").append(tplawesome(data, [{ "videoId":results.items[0].id.videoId}]));
            });
            $.get("youtube/title", function(data){ 
                $(".info-title").append(tplawesome(data,[{"title": results.items[0].snippet.title, "videoId":results.items[0].id.videoId}]));
            });
            $.get("youtube/description", function(data){ 
                $(".info-description").append(tplawesome(data,[{"description": results.items[0].snippet.description, "videoId":results.items[0].id.videoId}]));
            });
            $.get("youtube/finalDate", function(data){ 
                $(".publishedTime").append(tplawesome(data, [{finalDate}]));
            });

            $.get("youtube/relationVideo", function(data){ 
                $(".relationVideo-container").append(tplawesome(data,[{"title": results.items[1].snippet.title, "videoId":results.items[1].id.videoId}]));
            }); 
            $.get("youtube/relationVideo", function(data){ 
                $(".relationVideo-container").append(tplawesome(data,[{"title": results.items[2].snippet.title, "videoId":results.items[2].id.videoId}]));
            }); 
        });
    });
});

function init (){    gapi.client.setApiKey("AIzaSyDuLpwiCe78V9p0JE5rQaygB2XVgIDHjhs");
    gapi.client.load("youtube", "v3", function(){
       //youtube API ok 
    });
}

$( document ).ready(function(){
    $("#search-btn").on("click", function(){
       $('#info-section').addClass('show');
        $('#video-section').addClass('show');
        $('#description-section').addClass('show');
    });

您可以看到一个使用 Youtube API、NodeJS 和 Express here 的简单项目。

【讨论】：

【解决方案2】：

您可能希望集成 YouTube API：https://developers.google.com/youtube/v3/docs/search/list

但是如果你想按照上面描述的那样做，你可以得到那个页面然后抓取结果：基本上找到搜索结果的独特之处，使用 jquery 选择器定位它，然后从元素中获取你想要的数据.

【讨论】：

【解决方案3】：

尝试以下方法：

function searchByKeyword() {
  var results = YouTube.Search.list('id,snippet', {q: 'hangover+2009+trailer', maxResults: 1});
  return results.items[0];
}

【讨论】：