Javascript 使用APIv3（jquery）获取多个视频的Youtube视图计数_Javascript_Jquery_Youtube_Youtube Api

Javascript 使用APIv3（jquery）获取多个视频的Youtube视图计数

javascript jquery youtube youtube-api

Javascript 使用APIv3（jquery）获取多个视频的Youtube视图计数,javascript,jquery,youtube,youtube-api,Javascript,Jquery,Youtube,Youtube Api,我正在尝试创建一个youtube社交提要，其中包括视频、标题、描述、日期和浏览次数。除了最后一个，视图计数，我还有所有的工作要做。我已经能够显示视图计数，但它们总是不正常，我不知道如何使它们与各自的视频匹配。我将此视频用作初始教程：[它让我走了这么远，但现在我又迷路了。以下是我通过代码笔编写的代码：[ 这是我的html： <div id="container"> <h2>Results:</h2> <ul id="results"><

我正在尝试创建一个youtube社交提要，其中包括视频、标题、描述、日期和浏览次数。除了最后一个，视图计数，我还有所有的工作要做。我已经能够显示视图计数，但它们总是不正常，我不知道如何使它们与各自的视频匹配。我将此视频用作初始教程：[它让我走了这么远，但现在我又迷路了。以下是我通过代码笔编写的代码：[

这是我的html：

<div id="container">
  <h2>Results:</h2>
  <ul id="results"></ul>
</div>


结果：

下面是我的javascript：

var yourApiKey = 'AIzaSyDpY9FHgp7EvnDr5mGrxWwKgUBtfM8l5PE';

    var channelName = 'GoogleDevelopers';
    var vidCount = 5;
    var vidHeight = 275;
    var vidWidth = 400;

    $(document).ready(function(){
        $.get(
            "https://www.googleapis.com/youtube/v3/channels", {
                part: 'contentDetails',
                forUsername: channelName,
                key: yourApiKey},
            function(data){
                $.each(data.items, function(i, item){
                    console.log(item);
                    playerID = item.contentDetails.relatedPlaylists.uploads;
                    getVids(playerID);
                })
            }
        );
        function getVids() {
            $.get(
                "https://www.googleapis.com/youtube/v3/playlistItems", {
                    part: 'snippet',
                    maxResults: vidCount,
                    playlistId: playerID,
                    key: 'AIzaSyDpY9FHgp7EvnDr5mGrxWwKgUBtfM8l5PE'},
                function(data){
                    var output;
                    $.each(data.items, function(i, item){
                        console.log(item);
                        vidTitle = item.snippet.title;
                        videoID = item.snippet.resourceId.videoId;
                        vidDate = item.snippet.publishedAt;
                        vidDesc = item.snippet.description;      

                        output = '<li>'+vidTitle+'<span class="date">'+vidDate+'</span><p class="description">'+vidDesc+'</p><iframe height="'+vidHeight+'" width ="'+vidWidth+'" src=\"//www.youtube.com/embed/'+videoID+'\"></iframe></li>';

                        //append to results list
                        $('#results').append(output);
                        getViews(videoID[i]);
                    })
                }
            );
        }
        function getViews() {
            $.get(
                "https://www.googleapis.com/youtube/v3/videos", {
                    part: 'statistics',
                    id: videoID,
                    key: 'AIzaSyDpY9FHgp7EvnDr5mGrxWwKgUBtfM8l5PE'},
                function(data){
                    var output2;
                    $.each(data.items, function(i, item){
                        vidViews = item.statistics.viewCount;

                        output2 = '<span class="views">'+vidViews+'</span>'
                        //append to results list
                        $('#results li').each(function() {
                            $(this).append(output2);
                        });
                    })
                }
            );
        }
    });

var yourApiKey='AIzaSyDpY9FHgp7EvnDr5mGrxWwKgUBtfM8l5PE'；
var channelName='GoogleDevelopers'；
var-vidCount=5；
高度=275；
可变宽度=400；
$（文档）.ready（函数（）{
美元(
"https://www.googleapis.com/youtube/v3/channels", {
第部分：“内容详细信息”，
forUsername:channelName，
key:yourApiKey}，
功能（数据）{
$.each（data.items，function（i，item）{
控制台日志（项目）；
playerID=item.contentDetails.relatedPlaylists.uploads；
getVids（playerID）；
})
}
);
函数getVids（）{
美元(
"https://www.googleapis.com/youtube/v3/playlistItems", {
部分：'代码片段'，
maxResults:vidCount，
playlID:playerID，
关键字：“AIzaSyDpY9FHgp7EvnDr5mGrxWwKgUBtfM8l5PE”}，
功能（数据）{
var输出；
$.each（data.items，function（i，item）{
控制台日志（项目）；
vidTitle=item.snippet.title；
videoID=item.snippet.resourceId.videoID；
vidDate=item.snippet.publishedAt；
vidDesc=item.snippet.description；
输出=“”+vidTitle+”+vidDate+”“+vidDesc+””；
//附加到结果列表
$（“#结果”）。追加（输出）；
获取视图（videoID[i]）；
})
}
);
}
函数getViews（）{
美元(
"https://www.googleapis.com/youtube/v3/videos", {
第:"统计数字",，
id:videoID，
关键字：“AIzaSyDpY9FHgp7EvnDr5mGrxWwKgUBtfM8l5PE”}，
功能（数据）{
var输出2；
$.each（data.items，function（i，item）{
vidViews=item.statistics.viewCount；
输出2=''+视频视图+''
//附加到结果列表
$（'#results li'）。每个（函数（）{
$（this）.append（output2）；
});
})
}
);
}
});

我只想获得每个视频的viewCount并将其插入html，就像我对标题、日期等所做的那样。非常感谢您的帮助：）

这是您修改过的代码。这将在每个视频的末尾显示视图：

var yourApiKey = 'AIzaSyDpY9FHgp7EvnDr5mGrxWwKgUBtfM8l5PE';

var channelName = 'GoogleDevelopers';
var vidCount = 5;
var vidHeight = 275;
var vidWidth = 400;

$(document).ready(function () {
    $.get(
        "https://www.googleapis.com/youtube/v3/channels", {
            part: 'contentDetails',
            forUsername: channelName,
            key: yourApiKey
        },
        function (data) {
            $.each(data.items, function (i, item) {
                console.log(item);
                playerID = item.contentDetails.relatedPlaylists.uploads;
                getVids(playerID);
            })
        }
    );
    function getVids() {
        $.get(
            "https://www.googleapis.com/youtube/v3/playlistItems", {
                part: 'snippet',
                maxResults: vidCount,
                playlistId: playerID,
                key: 'AIzaSyDpY9FHgp7EvnDr5mGrxWwKgUBtfM8l5PE'
            },
            function (data) {
                var output;
                $.each(data.items, function (i, item) {
                    console.log(item);
                    vidTitle = item.snippet.title;
                    videoID = item.snippet.resourceId.videoId;
                    vidDate = item.snippet.publishedAt;
                    vidDesc = item.snippet.description;
                    var viewCountId = "viewCount" + i;
                    output = '<li>' + vidTitle + '<span class="date">' + vidDate + '</span><p class="description">' + vidDesc + '</p><iframe height="' + vidHeight + '" width ="' + vidWidth
                        + '" src=\"//www.youtube.com/embed/' + videoID + '\"></iframe>"<span id="' + viewCountId + '"></span></li>';

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

                    getViews(viewCountId);



                })
            }
        );
    }
    function getViews(viewCountId) {
        $.get(
            "https://www.googleapis.com/youtube/v3/videos", {
                part: 'statistics',
                id: videoID,
                key: 'AIzaSyDpY9FHgp7EvnDr5mGrxWwKgUBtfM8l5PE'
            },
            function (data) {
                var output2;
                $.each(data.items, function (i, item) {
                    $('#'+viewCountId).text("views=" + item.statistics.viewCount);
                })
            }
        );
    }
});

var yourApiKey='AIzaSyDpY9FHgp7EvnDr5mGrxWwKgUBtfM8l5PE'；
var channelName='GoogleDevelopers'；
var-vidCount=5；
高度=275；
可变宽度=400；
$（文档）.ready（函数（）{
美元(
"https://www.googleapis.com/youtube/v3/channels", {
第部分：“内容详细信息”，
forUsername:channelName，
钥匙：你的钥匙
},
功能（数据）{
$.each（data.items，function（i，item）{
控制台日志（项目）；
playerID=item.contentDetails.relatedPlaylists.uploads；
getVids（playerID）；
})
}
);
函数getVids（）{
美元(
"https://www.googleapis.com/youtube/v3/playlistItems", {
部分：'代码片段'，
maxResults:vidCount，
playlID:playerID，
关键字：“AIzaSyDpY9FHgp7EvnDr5mGrxWwKgUBtfM8l5PE”
},
功能（数据）{
var输出；
$.each（data.items，function（i，item）{
控制台日志（项目）；
vidTitle=item.snippet.title；
videoID=item.snippet.resourceId.videoID；
vidDate=item.snippet.publishedAt；
vidDesc=item.snippet.description；
var viewCountId=“viewCount”+i；
输出=“”+vidTitle+”+vidDate+”“+vidDesc+”
“”；
//附加到结果列表
$（“#结果”）。追加（输出）；
getViews（viewCountId）；
})
}
);
}
函数getViews（viewCountId）{
美元(
"https://www.googleapis.com/youtube/v3/videos", {
第:"统计数字",，
id:videoID，
关键字：“AIzaSyDpY9FHgp7EvnDr5mGrxWwKgUBtfM8l5PE”
},
功能（数据）{
var输出2；
$.each（data.items，function（i，item）{
$（'#'+viewCountId）.text（“views=“+item.statistics.viewCount”）；
})
}
);
}
});

至少解释一下您所做的更改。有时候，这确实有效，谢谢！似乎您创建了viewCountId变量来创建一个点来插入每个视频的视图，然后使用了该变量+i。这是非常正确的，还是有更多我不认识的地方？@ThatsMyJams-没问题：）……还有一点。…我已经创建了一个span控件并附加到输出（）。然后我将传递viewcountid以获取