包含部分内容的相关视频详细信息和统计信息 - Youtube API V3

Posted 2023-02-24

【中文标题】包含部分内容的相关视频详细信息和统计信息 - Youtube API V3

【英文标题】：Related Videos with part contentDetails and Statistics - Youtube API V3

【发布时间】：2016-07-18 19:31:05

【问题描述】：

我在以缩略图形式检索特定视频的相关视频时遇到问题。在我的代码中，我正确设置了 search->list 并返回相关视频的不同标题和缩略图 URL。但是，由于search->list 没有参数contentDetails 或statistics，我发现了另一个与我完全相同的问题here 相关的问题，并使用辅助调用来获取videos->list，因为它支持这些参数能够检索持续时间和观看次数。但问题是这两个值（vidDuration 和viewCount）都没有被传递任何东西并被标记为未定义，因为项目通过它并被暂停。如何根据search->list 的项目生成项目的duration 和viewCount 值？

script.js：

function relatedVids(videoId)

    debugger;
    $.get( // get related videos related to videoId - relatedToVideoId
        "https://www.googleapis.com/youtube/v3/search",
        
            part: 'snippet',
            maxResults: vidResults,
            relatedToVideoId: videoId, // $.cookie("id"); from single-video.html
            type: 'video',
            key: 'XXXXXXXXX'
        ,

        function(data)
        
            $.each(data.items,
                function(i, item)
                
                    console.log(item);
                    var vidTitle = item.snippet.title; // video title
                    //var videoId = item.snippet.resourceId.videoId; // video id
                    //var vidDuration = item.contentDetails.duration;
                    //var viewCount = item.statistics.viewCount;
                    var vidThumbUrl = item.snippet.thumbnails.default.url; // video thumbnail url
                    var extractVideoId = null; // var to extract video id string from vidThumbUrl

                    // check if vidThumbUrl is not null, empty string, or undefined
                    if(vidThumbUrl)
                    
                        //console.log("vidThumbUrl: ", vidThumbUrl);
                        var split = vidThumbUrl.split("/"); // split string when '/' seen
                        extractVideoId = split[4]; // retrieve the fourth index on the fourth '/'
                        //console.log("extractVideoId: ", extractVideoId); // YE7VzlLtp-4
                        //console.log("split array: ", split);
                    
                    else console.error("vidThumbUrl is either undefined or null or empty string."); 
                    // if video title is longer than 25 characters, insert the three-dotted ellipse
                    if(vidTitle.length > 25)
                    
                        var strNewVidTitle = vidTitle.substr(0, 25) + "...";
                        vidTitle = strNewVidTitle;
                    

                    // search->list only takes snippet, so to get duration and view count; have to call this function that has the recognized param structure
                    $.get(
                        "https://www.googleapis.com/youtube/v3/videos",
                        
                            part: 'contentDetails, statistics',
                            id: extractVideoId, //item.snippet.resourceId.videoId,
                            key: 'XXXXXXXXX',
                        ,
                        // return search->list item's duration and view count
                        function(item)
                        
                            vidDuration = item.contentDetails.duration; // pass item's duration
                            return vidDuration;
                        ,
                        function(item)
                        
                            viewCount = item.statistics.viewCount; // pass item's view count
                            return viewCount;
                        
                    );


                    try
                    
                        var vidThumbnail = '<div class="video-thumbnail"><a class="thumb-link" href="single-video.html"><div class="video-overlay"><img src="imgs/video-play-button.png"/></div><img src="' + vidThumbUrl + '"  style="width:204px;height:128px"/></a><p><a class="thumb-link" href="single-video.html">' + vidTitle + '</a><br/>' + convert_time(vidDuration) + ' / Views: ' + viewCount + '</p></div>';

                        // print results
                        $('.thumb-related').append(vidThumbnail);
                    
                    catch(err)
                    
                        console.error(err.message); // log error but continue operation    
                    
                
            );
        
    );

single-video.html 脚本：

$(document).ready(function() 

    var videoId;
    $(function() 
    
        if($.cookie("title") != null && $.cookie("id") != null)
        
            var data = '<div class="video"><iframe   src=\"//www.youtube.com/embed/' + $.cookie("id") + '\"></iframe></div><div class="title">' + $.cookie("title") + '</div><div class="desc">' + $.cookie("desc") + '</div><div class="duration">Length: ' + $.cookie("dur") + '</div><div class="stats">View Count: ' + $.cookie("views") + '</div>';

            $("#video-display").html(data);
            $("#tab1").html($.cookie("desc"));

            videoId = $.cookie("id");
            //vidDuration = $.cookie("dur"); works but prints out the same value for each
            //viewCount = $.cookie("views"); works but prints out the same value for each
            debugger;
            relatedVids(videoId); // called here


            console.log("from single-vid.html globalPlaylistId: ", $.cookie("playlistId"));


            // remove cookies after transferring it to this page for display
            $.removeCookie("title");
            $.removeCookie("id");
            $.removeCookie("desc");
            $.removeCookie("views");
            $.removeCookie("dur");
            $.removeCookie("tags");
            $.removeCookie("playlistId");
        
    );
);

【参考方案1】：

您指的是搜索结果中的item。 当您向视频发出获取请求时，您将获得视频内容详细信息和统计信息的响应。显然，您没有捕获返回的响应。

   $.get(
                    "https://www.googleapis.com/youtube/v3/videos",
                    
                        part: 'contentDetails, statistics',
                        id: videoId, //item.snippet.resourceId.videoId,
                        key: 'XXXXXXXXX',
                    ,

                    function(videoItem) 
                    
                        vidDuration = videoItem.contentDetails.duration; // pass item's duration
                        viewCount = videoItem.statistics.viewCount; // pass item's view count
                    
                );

注意：您可以传递由逗号分隔的视频 ID 字符串，以在一个请求中获取多个视频内容详细信息/统计信息。

【讨论】：

你介意给我看一个代码形式的例子吗？谢谢！

我编辑了我的代码并改进了一些东西，例如只有一个函数 relatedVids(videoId) 和 return 关键字的参数与 vidDuration 和 viewCount 根据你所说的，但由于某种原因，用于获取 vidDuration 和 viewCount 的来自 videoId 的 $.get() 对象存在，但两个值仍然没有任何内容并保持为空。

@TheAmazingKnight 你没明白我的意思。最初，videos get 请求的回调函数没有任何参数，这意味着您会默默地忽略返回的响应。所以我修改了你的代码，将参数videoItem 传递给回调。

我明白你的意思，但你的代码仍然没有得到价值，因此Uncaught TypeError: Cannot read property 'duration' of undefined。

嘿@JianChen 谢谢！这对我有帮助！ +1。您是否知道在一次 API 调用中可以包含多少个视频 ID 有上限？我在文档中找不到它（还）。