如何在 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 找到带有频道名称的频道 ID.io/YTC-ID/
youtube.search.list 的更多信息在 这里.
这是一个现场演示.
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屋！
