来自 Youtube API v3 的 contentDetails、持续时间和统计信息的问题答案

【问题标题】：Problems with contentDetails, duration and statistics from the Youtube API v3来自 Youtube API v3 的 contentDetails、持续时间和统计信息的问题
【发布时间】：2016-06-01 09:35:21
【问题描述】：

我正在尝试为每个视频检索 duration 和 viewCount 的值，这两个视频都在 video:list api 下。我创建了一个单独的函数，它将返回每个视频的持续时间和统计信息。唯一有效的是在getPlaylist(...) 函数中检索到的视频和videoId 的播放列表。我登录到控制台，这就是我得到的：

console.log("id: " + videoId + " duration: " + vidDuration + " viewCount: " + viewCount); // return value in console

id: xxx duration: undefined viewCount: undefined

我从来没有得到工作时间，但我注意到带有part: statistics 的 api 将从被注释掉的频道中检索总观看次数的值。但这不是我要找的。我希望它与每个视频一起使用：

GET https://www.googleapis.com/youtube/v3/videos

但由于某种原因，我无法让它工作。我有 videoId 属性和参数，所以 playlistId 可以读取它并检索视频的持续时间和观看次数的所述值，但它仍然未定义，即使 videoId 已定义。哦，警告对话框也没有出现。

我在这里错过了什么？

脚本：

var channelName = 'ExampleChannel';
var vidWidth = 500;
var vidHeight = 400; 
var vidResults = 15; /* # of videos to show at once - max 50 */
var vidDuration = "";
var viewCount = 0;
var videoId = "";

$(document).ready(function() {
    $.get( // get channel name and load data
        "https://www.googleapis.com/youtube/v3/channels",
        {
            part: 'contentDetails',
            forUsername: channelName,
            key: 'XXXXXXXXXX'
        },

        function(data)
        {
            $.each(data.items, 
                function(i, item) {
                    console.log(item); // log all items to console
                    var playlistId = item.contentDetails.relatedPlaylists.uploads;
                    //var viewCount = console.log(item.statistics.viewCount);
                    getPlaylists(playlistId);

            })
        }         
    );

    // function that gets the playlists
    function getPlaylists(playlistId)
    {
        $.get(
            "https://www.googleapis.com/youtube/v3/playlistItems",
            {
                part: 'snippet',
                maxResults: vidResults,
                playlistId: playlistId,
                key: 'XXXXXXXXXX'
            },

            // print the results
            function(data)
            {
                var output;
                $.each(data.items, 
                    function(i, item) {
                        console.log(item);
                        var vidTitle = item.snippet.title; // video title
                        var vidDesc = item.snippet.description; // video description
                        var videoId = item.snippet.resourceId.videoId; // video id

                        // check if description is empty
                        if(vidDesc == null || vidDesc == "")
                        {
                            vidDesc = "No description was written."; // FIX: test msg to see where it still shows up
                            $('#desc').remove(); // remove video description
                        }
                        else vidDesc = item.snippet.description;

                        vidDuration = getVideoDuration(videoId);
                        viewCount = getViewCount(videoId);
                        console.log("id: " + videoId + " duration: " + vidDuration + " viewCount: " + viewCount); // return value in console

                        output = '<li><iframe height="' + vidHeight + '" width="' + vidWidth + '" src=\"//www.youtube.com/embed/' + videoId + '\"></iframe></li><div id="title">' + vidTitle + '</div><div id="desc">' + vidDesc + '</div><div id="duration">Length: ' + vidDuration + '</div><div id="stats">View Count: ' + viewCount + '</div>';

                    // Append results to list tag
                    $('#results').append(output);
                })
            }         
        );
    }

    // return video duration
    function getVideoDuration(videoId) 
    { 
        $.get(
            "https://www.googleapis.com/youtube/v3/videos",
            {
                part: 'contentDetails',
                id: videoId,
                key: 'XXXXXXXXXX',
            },

            function(data)
            {
                $.each(data.items,
                    function(i, item) {
                        //videoId = item.snippet.resourceId.videoId;

                        alert(item.contentDetails.duration); // video duration
                        //alert(videoId);
                    })    
            }
        );
    }

    // return video view count
    function getViewCount(videoId) 
    { 
        $.get(
            "https://www.googleapis.com/youtube/v3/videos",
            {
                part: 'contentDetails, statistics',
                id: videoId,
                key: 'XXXXXXXXXX',
            },

            function(data)
            {
                $.each(data.items,
                    function(i, item) {
                        //videoId = item.snippet.resourceId.videoId;

                        alert(item.statistics.viewCount); // view count
                        //alert(videoId);
                    })  
            }
        );
    } 
});

截图：（更新）

【问题讨论】：

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

【解决方案1】：

因为当您调用这些函数时，您不必等待函数完成。您需要在 Javascript 中使用Promise。

我对你的代码稍作改动（用我的 api 密钥测试）

var channelName = 'example';
var vidWidth = 500;
var vidHeight = 400; 
var vidResults = 15; /* # of videos to show at once - max 50 */
var vidDuration = "";
var viewCount = 0;
var videoId = "";

$(document).ready(function() {
    $.get( // get channel name and load data
        "https://www.googleapis.com/youtube/v3/channels",
        {
            part: 'contentDetails',
            forUsername: channelName,
            key: 'xxx'
        },

        function(data)
        {
            $.each(data.items, 
                function(i, item) {
                    //console.log(item); // log all items to console
                    var playlistId = item.contentDetails.relatedPlaylists.uploads;
                    //var viewCount = console.log(item.statistics.viewCount);
                    getPlaylists(playlistId);

            });
        }         
    );

    // function that gets the playlists
    function getPlaylists(playlistId)
    {
        $.get(
            "https://www.googleapis.com/youtube/v3/playlistItems",
            {
                part: 'snippet',
                maxResults: vidResults,
                playlistId: playlistId,
                key: 'xxx'
            },

            // print the results
            function(data)
            {
                var output;
                $.each(data.items, 
                    function(i, item) {
                        console.log(item);
                        var vidTitle = item.snippet.title; // video title
                        var vidDesc = item.snippet.description; // video description
                        var videoId = item.snippet.resourceId.videoId; // video id

                        // check if description is empty
                        if(vidDesc == null || vidDesc == "")
                        {
                            vidDesc = "No description was written."; // FIX: test msg to see where it still shows up
                            $('#desc').remove(); // remove video description
                        }
                        else vidDesc = item.snippet.description;

                        getVideoDuration(videoId).done(function(d, v){
                             vidDuration = d;
                             //console.log(r);

                      
                               viewCount = v;

                        document.write("id: " + videoId + " duration: " + vidDuration + " viewCount: " + viewCount); // return value in console
                                
                        document.write("<br>");

                        output = '<li><iframe height="' + vidHeight + '" width="' + vidWidth + '" src=\"//www.youtube.com/embed/' + videoId + '\"></iframe></li><div id="title">' + vidTitle + '</div><div id="desc">' + vidDesc + '</div><div id="duration">Length: ' + vidDuration + '</div><div id="stats">View Count: ' + viewCount + '</div>';

                    // Append results to list tag
                    $('#results').append(output);
                   });
                });
            }         
        );
    }

    // return video duration
    function getVideoDuration(videoId) 
    { 
        var dfrd1 = $.Deferred();
        var r = '';
        $.get(
            "https://www.googleapis.com/youtube/v3/videos",
            {
                part: 'contentDetails',
                id: videoId,
                key: 'xxx',
            },

            function(data)
            {
                $.each(data.items,
                    function(i, item) {
                        //videoId = item.snippet.resourceId.videoId;
                        var view = 0;
                        r = item.contentDetails.duration; // video duration 
                        getViewCount(videoId).done(function(t){
                          view = t;
                          dfrd1.resolve(r, view);
                        });
                        
                        //alert(videoId);
                    });    
            }
        );
        return dfrd1.promise();
    }

    // return video view count
    function getViewCount(videoId) 
    { 
        var dfrd2 = $.Deferred();
        var r = '';
        $.get(
            "https://www.googleapis.com/youtube/v3/videos",
            {
                part: 'contentDetails, statistics',
                id: videoId,
                key: 'xxx',
            },

            function(data)
            {

                $.each(data.items,
                    function(i, item) {
                        //videoId = item.snippet.resourceId.videoId;

                        r = item.statistics.viewCount; // view count
                        //alert(videoId);
                        dfrd2.resolve(r);

                      // console.log("in", r);
                    });  
            }
        );
        return dfrd2.promise();
    } 
});

编辑

换句话说，这是一个异步方法调用。

getVideoDuration(videoId).done(function(r)

说明：

调用函数getVideoDuration 和.done 告诉函数getVideoDuration 将在我们解决promise (dfrd1.resolve(r);) 时返回一个结果。与此同时，函数return dfrd1.promise(); 意味着结果将被推迟。当承诺得到解决时，我们输入done，然后我们就可以完成剩下的工作了:)

~~您在屏幕截图中看到的内容是合乎逻辑的，因为有两个 Promise ！~~ 我的错误我没有看到重复的输入行。我修改了代码来解决这个问题。

所以第一个函数getVideoDuration 将被解析，然后是第二个。 解析第二个函数时我们解析第一个承诺，将结果发送到函数getPlaylists(playlistId)

25/02 编辑

我更改了有关承诺错误的代码。

【讨论】：

非常感谢您的帮助！我想了解您在这里做了什么以及为什么它以您的方式工作？我之前从未使用过 Promise 或 Deferred 方法，甚至没有听说过它！我一直以为你知道如果你调用了参数化方法，它会通过它并返回值。我在控制台中注意到，它首先返回所有对象，然后返回所有单独的持续时间和视图计数值。您介意详细说明吗？提前谢谢！
另一个问题，我想弄清楚。我注意到在将所有不同的持续时间打印到控制台后，它会打印出最后一个重复的相同持续时间值。帖子更新了！