获取playlistItems的viewCount,组合HTTP请求youtube v3 + JQuery

时间:2015-10-26 08:35:54

标签: javascript jquery youtube-api xmlhttprequest youtube-data-api

我慢慢地开始'在这里疯狂:(我无法获得看似简单的工作。我使用yt api v3从频道获取特定播放列表的视频。现在我使用两个HTTP请求(频道和播放列表项):

  1. 获取给定用户名(渠道/内容详情)的所有上传的播放列表ID
  2. 从html-tag
  3. 中的数据属性获取特定的播放列表ID
  4. 使用ID获取每个播放列表的视频信息(playlistItems / snippet)
  5. 输出视频信息,附加到列表
  6. 此代码到目前为止起作用:

    HTML

    <h2><span>List 1</h2>
    <ul data-plist="PLquImyRfMt6dWNzlyTHW9m353VadxKKg_"></ul>
    
    <h2>List 2</h2>
    <ul data-plist="PLquImyRfMt6d4gk6zX8FPEZeyYgE4oBdR"></ul>
    
    <h2>List 3</h2>
    <ul data-plist="PLquImyRfMt6fnpIb9VR9c6VLZwYs_OyWL"></ul>
    

    JS / JQUERY:

    var channelName = 'goetheinstitut';
    var vidResults = 3;
    
    
    // Get all Videos from the channel via Playlist "uploads"
    $.get(
        "https://www.googleapis.com/youtube/v3/channels", {
        part: 'contentDetails',
        forUsername: channelName,
        key: 'AIzaSyCu8N1RGBaExofEQtBZHMMpAYNxvirhIBM'
    },
    
    function (data) {
        $.each(data.items, function (i, item) {
            pid = item.contentDetails.relatedPlaylists.uploads;
            getVids(pid);
        });
    });
    
    // Get videos for specific Playlist, id from data attr
    
    function getVids(pid) {
    
        $("[data-plist]").each(function () {
    
            var vidPlaylist = $(this).data('plist');
            var mylist = $(this);
    
            // Get and output Playlist Items
            $.get(
                "https://www.googleapis.com/youtube/v3/playlistItems", {
                part: 'snippet',
                maxResults: vidResults,
                playlistId: vidPlaylist,
                key: 'AIzaSyCu8N1RGBaExofEQtBZHMMpAYNxvirhIBM'
            },
    
            function (data) {
                var output;
    
                $.each(data.items, function (i, item) {
                    videoTitle = item.snippet.title.substring(8);
                    videoId = item.snippet.resourceId.videoId;
    
                    output = '<li><a href=\"//www.youtube.com/embed/' + videoId + '?autoplay=1&showinfo=0&controls=0\"><h3>' + videoTitle + '</h3><small>viewCount</small></a></li>';
    
                    //Append to results list                            
                    $(mylist).append(output);
                    });
                });
            });
        }
    

    现在我还需要每个视频的viewCount。这意味着我必须将每个播放列表中的videoIds存储在一个数组中,然后为统计信息发出新请求(https://www.googleapis.com/youtube/v3/videos)。查看次数。但我无法用我已有的代码来管理它。这是jsfiddle

    这里是对viewCount的请求,手动输入了一组id:

    $.get(
        "https://www.googleapis.com/youtube/v3/videos", {
        part: 'statistics',
        // 3 ids from List 1 - these would have to come as variable
        id: '8kFevX-bp8g, L6thExvypGg, D_RBv6Bsm6E',
        key: 'AIzaSyCu8N1RGBaExofEQtBZHMMpAYNxvirhIBM'
    },
    
    function (data) {
        var listviews;
    
        $.each(data.items, function (i, item) {
            views = item.statistics.viewCount;
    
            listviews = '<li>'+views+'</li>';
    
            $('#results').append(listviews);
            // should be part of the output from the previous function...           
        });
    });
    

    有人可以帮我把这两个请求拼凑起来吗?我总是得到一些未定义的变量,因为我关闭了范围。 :(

1 个答案:

答案 0 :(得分:1)

我可能没有正确理解你的要求。

但是,这段代码怎么样?

var channelName = 'goetheinstitut';
var vidResults = 3;

$.get(
    "https://www.googleapis.com/youtube/v3/channels", {
    part: 'contentDetails',
    forUsername: channelName,
    key: 'AIzaSyCu8N1RGBaExofEQtBZHMMpAYNxvirhIBM'
},
function (data) {
    $.each(data.items, function (i, item) {
        var pid = item.contentDetails.relatedPlaylists.uploads;
        getVids(pid);
    });
});

function getVids(pid) {
    $("[data-plist]").each(function () {
        var vidPlaylist = $(this).data('plist');
        var mylist = $(this);
        $.get(
            "https://www.googleapis.com/youtube/v3/playlistItems", {
            part: 'snippet',
            maxResults: vidResults,
            playlistId: vidPlaylist,
            key: 'AIzaSyCu8N1RGBaExofEQtBZHMMpAYNxvirhIBM'
        },
        function (data) {
            $.each(data.items, function (i, item) {
                var videoTitle = item.snippet.title.substring(8);
                var videoId = item.snippet.resourceId.videoId;
                $.get(
                    "https://www.googleapis.com/youtube/v3/videos", {
                    part: 'statistics',
                    id: videoId,
                    key: 'AIzaSyCu8N1RGBaExofEQtBZHMMpAYNxvirhIBM'
                },
                function (data) {
                    $.each(data.items, function (i, item) {
                        var views = item.statistics.viewCount;
                        var output = '<li><a href=\"//www.youtube.com/embed/' + videoId + '?autoplay=1&showinfo=0&controls=0\"><h3>' + videoTitle + '</h3><small>' + views + '</small></a></li>';
                        $(mylist).append(output);
                    });
                });
            });
        });
    });
}