如何在 angularjs 中将 API KEY 与 YouTube 一起使用并在播放列表中列出视频? [英] How to use API KEY with YouTube in angularjs and list videos in a playlist?
问题描述
我想使用 angularjs 在我的移动应用中列出来自 YouTube 的一堆视频.我最好列出用户/频道特定播放列表的所有视频.
I want to list a bunch of videos from YouTube in my mobile app using angularjs. Preferrably I'd like to list all videos of a user/channels specific playlist.
我从 Google Developer Console 获得了 API KEY，但我不知道如何以及在何处使用它.在本文档中，他们只介绍了 oauth 方法.https://developers.google.com/youtube/v3/code_samples/javascript#authorizing_requests我尝试直接使用该文档中的示例代码，但收到一条消息，提示我必须先进行身份验证.
I've gotten the API KEY from Google Developer Console but I don't understand how and where to use it. In this documentation they only go over the oauth method. https://developers.google.com/youtube/v3/code_samples/javascript#authorizing_requests I tried using the example code straight up from that documentation only to get a message saying I have to authenticate first.
我真的很感激这方面的一些帮助.如何使用 api 密钥进行身份验证，其次如何发出请求以获取播放列表中的视频.
I'd really appreciate some help into this. How do authenticate using the api key and secondly how to make the request to get the videos in a playlist.
ps.我是一名新手开发人员，我在我的第一个学习项目中使用了 angularjs 和 ionic 框架.我刚从 Codeschool 的 css、jquery、javascript、backbone 和 angular 课程中毕业.ds.谢谢！
ps. I'm a newbie developer and I'm using angularjs and ionic framework for my first learning project. I'm fresh out of Codeschool's courses in css, jquery, javascript, backbone and angular. ds. Thanks!
推荐答案
1.API使用方法
如果您想要某个频道的视频，则需要使用 YouTube API V3.使用 youtube.search.list
带参数:
part=id, snippet
channelId=ID OF THE CHANNEL
order=date
type=video
如何查找 YouTube 频道的 ID?
你可以通过http://mpgn.github.io/YTC-ID/
有关 youtube.search.list 的更多信息，请在 此处.
More information of youtube.search.list right here.
这是一个 现场演示.
This is a live demo.
- 首先，您需要在 console.google.developers 中创建一个项目.
- 启用 API YouTube API V3(设置为开启).
- 在凭证部分，创建一个公共访问密钥.
此外，如果它是公共应用程序，您可能会感兴趣:如何保护我的公共 API 密钥?
Also if it's a public app, you may interest by : How to protect my public API key ?
这是获取频道视频的基本代码:
This is the basic code to get the videos of a channel :
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script>
function googleApiClientReady() {
var apiKey = 'your api key';
gapi.client.setApiKey(apiKey);
gapi.client.load('youtube', 'v3', function() {
request = gapi.client.youtube.search.list({
part: 'snippet',
channelId: 'UCqhNRDQE_fqBDBwsvmT8cTg',
order: 'date',
type: 'video'
});
request.execute(function(response) {
console.log(response);
});
});
}
</script>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
</body>
</html>
3.使用 AngularJS 吗?
例如，使用 AngularJS，您需要创建一个服务google"，并且您可以在控制器中使用该服务.
3. With AngularJS ?
With AngularJS you need to creat a service 'google' for example, and you can use the service in your controllers.
示例示例:https://gist.github.com/jakemmarsh/5809963您不需要带有身份验证的部分.在这种情况下，使用 deferred 很重要.
An sample example : https://gist.github.com/jakemmarsh/5809963
You don't need the part with authentification.
Using deferred is important in this case.
控制器
'use strict';
function init() {
window.initGapi(); // Calls the init function defined on the window
}
angular.module('team')
.controller('VideosCtrl', function ($scope, $window, $sce, googleService) {
$window.initGapi = function() {
$scope.$apply($scope.getChannel);
};
$scope.getChannel = function () {
googleService.googleApiClientReady().then(function (data) {
$scope.channel = data;
}, function (error) {
console.log('Failed: ' + error)
});
};
});
服务 googleService
Example in the service googleService
.service('googleService', ['$http', '$q', function ($http, $q) {
var deferred = $q.defer();
this.googleApiClientReady = function () {
gapi.client.setApiKey('YOU API KEY');
gapi.client.load('youtube', 'v3', function() {
var request = gapi.client.youtube.playlistItems.list({
part: 'snippet',
playlistId: 'PLila01eYiSBjOtR8oqXkY0i5c1QS6k2Mu',
maxResults: 8
});
request.execute(function(response) {
deferred.resolve(response.result);
});
});
return deferred.promise;
};
}])
您需要将此行添加到您的 index.html
You need to add this line to your index.html
<script src="https://apis.google.com/js/client.js?onload=init"></script>
希望对你有帮助！
这篇关于如何在 angularjs 中将 API KEY 与 YouTube 一起使用并在播放列表中列出视频?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
