gpt4 book ai didi

javascript - 使用 Angular JS 获取播放列表中的所有 YouTube 视频

转载 作者:行者123 更新时间:2023-11-27 22:51:52 25 4
gpt4 key购买 nike

我想要获取指定播放列表中的所有 YouTube 视频。该 API 目前允许您一次提取 50 条记录,但您可以通过传递下一页 token 来提取下一组记录。

我对 Angular 还很陌生,在完成这项任务时遇到了困难。

这是我目前拥有的:

var app = angular.module('ph', []);
var key = '';

app.factory('youtubeService', ['$http', function ($http) {

function getPlaylists(channelId) {
return $.get("https://www.googleapis.com/youtube/v3/playlists", { part: 'snippet', channelId: channelId, key: key, maxResults: 50 });
}

function getPlaylistVideos(playlistId) {

var items = [];
var nextPageToken = "";

$.get('https://www.googleapis.com/youtube/v3/playlistItems', { part: 'snippet', maxResults: 50, playlistId: playlistId, key: key }).then(function (firstResponse) {

items = firstResponse.items;
var numberOfPages = Math.ceil(firstResponse.pageInfo.totalResults / 50);

for (var page = 1; page <= numberOfPages; page++) {
$.get('https://www.googleapis.com/youtube/v3/playlistItems', { part: 'snippet', maxResults: 50, pageToken: nextPageToken, playlistId: playlistId, key: key }).then(function(response) {
items = items.concat(response.items);
nextPageToken = response.nextPageToken;
});
}
});

return items;
}

function getVideos(keyword) {
return $.get('https://www.googleapis.com/youtube/v3/search', { part: 'snippet', q: keyword, key: key, type: 'video' });
}

return { getPlaylists: getPlaylists, getPlaylistVideos: getPlaylistVideos, getVideos: getVideos }

}]);


app.controller('ctrl', ['$http', '$scope', 'youtubeService', function ($http, $scope, youtubeService) {

youtubeService.getPlaylists('UC-9-kyTW8ZkZNDHQJ6FgpwQ').then(function (response) {
$scope.$apply(function () {
$scope.playlists = response.items;
});
});

$scope.getPlaylistVideos = function (selection) {
youtubeService.getPlaylistVideos(selection.id).then(function (response) {
$scope.$apply(function () {
$scope.playlistvideos = response.items;
});
});
}

$scope.getVideos = function (selection) {
youtubeService.getVideos(selection).then(function (response) {
$scope.$apply(function () {
$scope.videos = response.items;
});
});
}
}]);

我需要对 getPlaylistVideos 函数执行什么操作才能返回播放列表中的所有视频?而不仅仅是 50 个。

这是我之前仅返回第一页的代码:

function getPlaylistVideos(playlistId) {
return $.get('https://www.googleapis.com/youtube/v3/playlistItems', { part: 'snippet', maxResults: 50, playlistId: playlistId, key: key});
}

示例播放列表 ID 为 PLFPg_IUxqnZNTAbUMEZ76_snWd-ED5en7。

非常感谢任何帮助!

修改后的答案

$scope.getPlaylistVideos = function (selection) {
// pass the nextPageToken attribute to the getPlaylistVideos method.
youtubeService.getPlaylistVideos("PLFPg_IUxqnZNTAbUMEZ76_snWd-ED5en7", $scope.nextPageToken).then(function (response) {
$scope.$apply(function () {
angular.forEach(response.items, function (item) {
$scope.playlistvideos.push(item);
});

if (typeof response.nextPageToken != 'undefined') {
$scope.nextPageToken = response.nextPageToken;
// call the get playlist function again
$scope.getPlaylistVideos(selection);
}
});
});
}

最佳答案

您需要使用pageToken属性来获取下一页。

根据文档,使用 API 响应中的 nextPageToken 属性。调用 API 一次或多次以检索列表。只要API响应返回一个nextPageToken,还有更多元素需要检索。

在您的 Controller 中,定义一个局部变量 nextPageToken 来检索下一页,并使用 nextPageToken 属性递归调用 getPlaylistVideos,直到所有检索结果。

app.controller('ctrl', ['$http', '$scope', 'youtubeService', function ($http, $scope, youtubeService) {

// define a local variable pageToken, it is gonna be undefined for the first time and will be initialized with next page token after subsequent responses
$scope.nextPageToken;
$scope.playlistVideos = [];

youtubeService.getPlaylists('UC-9-kyTW8ZkZNDHQJ6FgpwQ').then(function (response) {
$scope.$apply(function () {
$scope.playlists = response.items;
});
});

$scope.getPlaylistVideos = function (selection) {
// pass the nextPageToken attribute to the getPlaylistVideos method.
youtubeService.getPlaylistVideos(selection.id, $scope.nextPageToken).then(function (response) {
$scope.$apply(function () {
$scope.playlistVideos.push(response.items);

if(typeof response.nextPageToken != 'undefined'){
$scope.nextPageToken = response.nextPageToken;
// call the get playlist function again
$scope.getPlaylistVideos(selection);
}
});
});
}

$scope.getVideos = function (selection) {
youtubeService.getVideos(selection).then(function (response) {
$scope.$apply(function () {
$scope.videos = response.items;
});
});
}
}]);

在您的服务中,将 pageToken 属性传递给 API 以获取下一页。

function getPlaylistVideos(playlistId, pageToken) {
...
// pass the page token as a parameter to the API
$.get('https://www.googleapis.com/youtube/v3/playlistItems', { part: 'snippet', maxResults: 50, playlistId: playlistId, key: key, pageToken: pageToken })
...
}

关于javascript - 使用 Angular JS 获取播放列表中的所有 YouTube 视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37982941/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com