Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何在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和在播放列表中列出视频?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。