Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Youtube iframe Api and Angularjs route

I encountered a problem with Youtube Iframe Api used with angularjs.

I think the problem is the call of "onYouTubeIframeAPIReady" function.

I use angularjs with routes and the function doesn't fire when the route is changed, however when I hit F5 it's ok the player is loaded.

Is there a way to make angularjs with routes and youtube API work?

I didn't manage to add more file in the code but "pageX.htm" looks like this :

<button ng-click="video()">Create</button>
<div youtube-player id="test-playerX" ></div>

And there is the code for "index.htm"

<!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'
          })
          .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.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) {
              $scope.video = function () {
                youtubePlayerApi.createPlayer();
                console.log("test");
              }

          });
    </script>


  </body>
</html>

Any help is appreciated :)

[EDIT] : I have updated the code to test the fonction createPlayer and confirm that the player is working when changing pages

like image 492
djutopie Avatar asked Aug 05 '15 09:08

djutopie


1 Answers

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

like image 58
djutopie Avatar answered Sep 28 '22 09:09

djutopie