如何在angularjs中使用API KEY和在播放列表中列出视频？

我想使用 angularjs在我的移动应用中列出一堆来自YouTube的视频.
我想要列出用户/频道特定播放列表的所有视频.

我从Google Developer Console获得了API KEY,但我不明白如何以及在何处使用它.在本文档中,他们只讨论了oauth方法. https://developers.google.com/youtube/v3/code_samples/javascript#authorizing_requests
我尝试直接使用该文档中的示例代码来获取一条消息,说我必须首先进行身份验证.

我真的很感激这方面的一些帮助.
如何使用api密钥进行身份验证,其次如何使用播放列表中的视频进行身份验证.

PS.我是一名新手开发人员,我正在使用angularjs和离子框架进行我的第一个学习项目.我是新出的Codeschool的css,jquery,javascript,backbone和angular的课程. DS.
谢谢！

解决方法

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/找到频道的ID

有关youtube.search.list的更多信息,请致电here.

这是live demo.

2.用Javascript？

>首先,您需要在console.google.developers创建一个项目.
>启用API YouTube API V3(设置为开).
>在凭证部分中,创建公共访问密钥.

此外,如果它是一个公共应用程序,您可能会感兴趣：How to protect my public API key ?

这是获取频道视频的基本代码：

<!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’,您可以在控制器中使用该服务.

示例示例：https://gist.github.com/jakemmarsh/5809963
您不需要具有身份验证的部分.
在这种情况下,使用延迟很重要.

控制器中的示例

'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中的示例

.service('googleService',['$http','$q',function ($http,$q) {

    var deferred = $q.defer();
    this.googleapiclientReady = function () {
        gapi.client.setApiKey('YOU API KEY');
        gapi.client.load('youtube',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

<script src="https://apis.google.com/js/client.js?onload=init"></script>

希望它对你有所帮助！

如何在angularjs中使用API​​ KEY和在播放列表中列出视频？

解决方法

相关推荐

如何在angularjs中使用API KEY和在播放列表中列出视频？