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

Question

我在将相关视频作为缩略图检索到特定视频时遇到问题。在我的代码中，我正确设置了search->list，并返回相关视频的不同标题和缩略图URL。然而，由于search->list没有参数contentDetails或statistics，我在这里发现了另一个与我完全相同的问题有关的问题，并使用了第二个调用来获取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 + '" alt="No Image Available." 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    
                    }
                }
            );
        }
    );
}

singlevideo.html脚本：

$(document).ready(function() 
{
    var videoId;
    $(function() 
    {
        if($.cookie("title") != null && $.cookie("id") != null)
        {
            var data = '<div class="video"><iframe height="' + vidHeight + '" width="' + vidWidth + '" 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");
        }
    });
});

Answer 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字符串，以便在一个请求中获取多个视频内容详细信息/统计信息。