使用Angular JS获取播放列表中的所有YouTube视频 [英] Get all YouTube Videos in a Playlist using Angular JS
问题描述
我想在指定的播放列表中获取所有YouTube视频.该API当前允许您一次提取50条记录，但是您可以通过传递下一页标记来提取下一组记录.
I want to get all of the YouTube videos in a specified playlist. The API currently allows you to pull 50 records at a time but you can pull the next set of records by passing a next page token.
我对Angular还是陌生的，但在完成此任务时遇到困难.
I am still new to Angular and I am having trouble accomplishing this task.
这是我目前拥有的:
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.
What do I need to do to the getPlaylistVideos function to get it to return all of the videos in a playlist? Rather than just 50.
这是我之前返回第一页的代码:
This is the code that I had before for just returning first page:
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.
An example playlist id is 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属性来获取下一页.
You need to use the pageToken attribute to fetch the next page.
从文档中， 使用api响应中的nextPageToken属性.一次或多次调用API，以检索 列表.只要API响应返回nextPageToken， 还有更多要检索的项目.
From the documentation, Use the nextPageToken attribute from the api response.Call the API one or more times to retrieve all items in the list. As long as the API response returns a nextPageToken, there are still more items to retrieve.
在您的控制器中，定义一个局部变量nextPageToken来检索下一页，并递归调用具有nextPageToken属性的getPlaylistVideos，直到检索到所有结果为止.
In your controller, define a local variable nextPageToken to retrieve the next page and call the getPlaylistVideos with the nextPageToken attribute recursively until all the results are retrieved.
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以获取下一页.
In your service, pass the pageToken attribute to the api to fetch the next page.
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 })
...
}
这篇关于使用Angular JS获取播放列表中的所有YouTube视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
