Youtube iframe Api and Angularjs route
As Karan Kapoor says in the last comment, the best way to use youtube api with angularjs is to use github.com/brandly/angular-youtube-embed
OK I have found a solution, it is far not the cleanest but it works.
I admit that in the controller when you are changing routes, the youtube api is already initialized. So the controller just create the player.
When F5 or first time loading requested, we must fire onYouTubeIframeAPIReady to instantiate the player.
Here is the code :
<!DOCTYPE html>
<html ng-app="sc">
<body>
Homepage - <a href="#page1">Page1</a> - <a href="#page2">Page2</a>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.3/angular-route.min.js"></script>
<script>
var sc = angular.module('sc', ['ngRoute']);
sc.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/page1', {
templateUrl: 'page1.htm',
controller: 'replaycontroller'
})
.when('/page2', {
templateUrl: 'page2.htm'
})
}]);
// Run
sc.run(['$rootScope', function($rootScope) {
var tag = document.createElement('script');
// This is a protocol-relative URL as described here:
// http://paulirish.com/2010/the-protocol-relative-url/
// If you're testing a local page accessed via a file:/// URL, please set tag.src to
// "https://www.youtube.com/iframe_api" instead.
tag.src = "http://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}]);
sc.service('youtubePlayerApi', ['$window', '$rootScope', '$log', function ($window, $rootScope, $log) {
var service = $rootScope.$new(true);
// Youtube callback when API is ready
$window.onYouTubeIframeAPIReady = function () {
$log.info('Youtube API is ready');
service.ready = true;
service.createPlayer();
};
service.ready = false;
service.playerId = null;
service.player = null;
service.videoId = "sGPrx9bjgC8";
service.playerHeight = '390';
service.playerWidth = '640';
service.getStatus = function () {
return service.ready;
};
service.bindVideoPlayer = function (elementId) {
$log.info('Binding to player ' + elementId);
service.playerId = elementId;
};
service.createPlayer = function () {
$log.info('Creating a new Youtube player for DOM id ' + this.playerId + ' and video ' + this.videoId);
return new YT.Player(this.playerId, {
height: this.playerHeight,
width: this.playerWidth,
videoId: this.videoId
});
};
service.loadPlayer = function () {
// API ready?
if (this.ready && this.playerId && this.videoId) {
if(this.player) {
this.player.destroy();
}
this.player = this.createPlayer();
}
};
return service;
}]);
sc.directive('youtubePlayer', ['youtubePlayerApi', function (youtubePlayerApi) {
return {
restrict:'A',
link:function (scope, element) {
youtubePlayerApi.bindVideoPlayer(element[0].id);
}
};
}]);
sc.controller('replaycontroller', function ($scope,youtubePlayerApi) {
if (youtubePlayerApi.getStatus() == true) {
youtubePlayerApi.bindVideoPlayer("test-player1");
youtubePlayerApi.createPlayer();
}
});
</script>
</body>
</html>