How to use API KEY with YouTube in angularjs and list videos in a playlist?

前端未结

关注

 2  1376

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.

I\'ve

相关标签:

2条回答

南方客

2020-12-06 20:16
You have to use Google APIs Client Library so that gapi object will be defined and examples from google will work. Include this in the bottom of the page:
```
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
```
And than define callback which will proceed with authorization and your logic:
```
googleApiClientReady = function() {
  gapi.auth.init(function() {
    // Other code following the example
  });
}
```
In general as per Google documentation there are
1. The application loads the JavaScript client library.
2. The application references its API key, which authenticates the application with Google services.
3. If the application needs access to the user's personal information, it opens a session with a Google auth server. The auth server opens a dialog box which prompts the user to authorize the use of personal information.
4. The application loads the API for the Google service.
5. The application initializes a request object (also called a service object) that specifies the data to be returned by the API.
6. The application executes the request and processes the data returned by the API.
Here is a working example of basic google API authorization process
0 讨论(0)
发布评论:

提交评论
- 加载中...

终归单人心

2020-12-06 20:24

1. How to use the API

If you want videos of a channel you need to use the YouTube API V3. Use youtube.search.list

with the parameters :

part=id, snippet
channelId=ID OF THE CHANNEL
order=date
type=video

How to find ID of a YouTube Channel ?

You can find the id of a channel with his channel name with http://mpgn.github.io/YTC-ID/

More information of youtube.search.list right here.

This is a live demo.

2. With Javascript ?

First, you need to creat a project in console.google.developers.
Enable the API YouTube API V3 (set to on).
In credential part, creat a public access key.

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. With AngularJS ?

With AngularJS you need to creat a service 'google' for example, and you can use the service in your controllers.

An sample example : https://gist.github.com/jakemmarsh/5809963 You don't need the part with authentification. Using deferred is important in this case.

Example in the controller

'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)
            });
        };
    });

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;
    };
}])

You need to add this line to your index.html

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

Hope it's help you !

0 讨论(0)