How to use API KEY with YouTube in angularjs and list videos in a playlist? -
i want list bunch of videos youtube in mobile app using angularjs. preferrably i'd list videos of user/channels specific playlist.
i've gotten api key google developer console don't understand how , use it. in documentation go on oauth method. https://developers.google.com/youtube/v3/code_samples/javascript#authorizing_requests tried using example code straight documentation message saying have authenticate first.
i'd appreciate this. how authenticate using api key , secondly how make request videos in playlist.
ps. i'm newbie developer , i'm using angularjs , ionic framework first learning project. i'm fresh out of codeschool's courses in css, jquery, javascript, backbone , angular. ds. thanks!
1. how use api
if want videos of channel need use youtube api v3. use youtube.search.list
with parameters :
part=id, snippet channelid=id of channel order=date type=video how find id of youtube channel ?
you can find id of channel channel name http://mpgn.github.io/ytc-id/
more information of youtube.search.list right here.
this live demo.
2. javascript ?
- first, need creat project in console.google.developers.
- enable api youtube api v3 (set on).
- in credential part, creat public access key.
also if it's public app, may interest : how protect public api key ?
this basic code videos of 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 ?
with angularjs need creat service 'google' example, , can use service in controllers.
an sample example : https://gist.github.com/jakemmarsh/5809963 don't need part authentification. using deferred important in case.
example in controller
'use strict'; function init() { window.initgapi(); // calls init function defined on 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 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 add line index.html
<script src="https://apis.google.com/js/client.js?onload=init"></script> hope it's !
Comments
Post a Comment