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

Question

我在检索相关视频作为特定视频的缩略图时遇到问题。在我的代码中，我正确设置了 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 + '" 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    
                    }
                }
            );
        }
    );
}

single-video.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

您在搜索结果中引用了项目。当您向视频发出 get 请求时，您将得到视频内容详细信息和统计信息的响应。显然，您没有捕获返回的响应。

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