AngularJS и Youtube, вызывают сценарий, когда видео заканчивается.

Question

Я пытаюсь вызвать функцию, когда youtube заканчивает воспроизведение видео. Я создал представление, как это:

<div class="row"> 
    <div class="col-md-6"> 

     <div id="player" ts-video-player></div> 

    </div> 
</div> 

тогда я решил создать директиву так:

.directive('tsVideoPlayer', ['$state', function ($state) { 


    // autoplay video 
    function onPlayerReady(event) { 
     console.log('autoplay'); 

     event.target.playVideo(); 
    } 

    // when video ends 
    function onPlayerStateChange(event) { 
     if (event.data === 0) { 
      console.log('finsihed'); 

      alert('done'); 
     } 
    } 

    return { 
     restrict: 'A', 
     link: function (scope, element) { 

      console.log('set up player'); 
      console.log(element.attr('id')); 

      function onYouTubePlayerAPIReady() { 

       console.log('Creating player'); 

       var player = new YT.Player(element.attr('id'), { 
        height: '390', 
        width: '640', 
        videoId: 'GE2BkLqMef4', 
        events: { 
         'onReady': onPlayerReady, 
         'onStateChange': onPlayerStateChange 
        } 
       }); 
      } 
     } 
    } 
}]) 

Я включил этот скрипт в файле index.html:

<script src="http://www.youtube.com/player_api"></script> 

Но ничего не происходит. В моих консольных журналах отображается «настройка видеопроигрывателя» и идентификатор проигрывателя, но onYouTubePlayerAPIRead никогда не вызывается.

Может кто-нибудь помочь мне?

Answer 1

Причина может заключаться в том, что функция, которую вы определили, находится внутри директивы, связывающей функцию закрытия. YouTube api не может получить доступ к этому методу. Вам нужно будет поместить его в объект окна. Вы можете в несколько способов:

1) Создать глобальную функцию и уведомления по троеборью

Как раз перед концом вашего тела тега поместить поместить функцию в глобальной области видимости и разжиться углового rootScope элемента и трансляция события:

<script> 
    function onYouTubePlayerAPIReady(){ 
    angular.element(document).ready(function(){ 
     var rootScope = angular.element(document).injector().get('$rootScope'); 
     rootScope.$broadcast('onYouTubePlayerAPIReady'); 
    }); 
    } 
</script> 
<script src="http://www.youtube.com/player_api"></script> 

и подписаться на это событие в вашей директиве.

.directive('tsVideoPlayer', [function() { 


    // autoplay video 
    //.... 

    return { 
     restrict: 'A', 
     link: function (scope, element) { 
      //.... 
      scope.$on('onYouTubePlayerAPIReady', function() { 
       console.log('Creating player'); 
       var player = new YT.Player(element.attr('id'), { 
        ..... 
       }); 
      }); 
     } 
    } 
}]); 

Demo

---

2) Проверьте положение в самой

Другой способ директивы проверка YT объекта и его loaded статус и сделать необходимые действия.

.directive('tsVideoPlayer', ['$window', function ($window) { 

    return { 
     restrict: 'A', 
     link: function (scope, element) { 
      console.log(YT.loaded); 

      if (!YT) { 
       console.log('playerNotLoaded'); 
       $window.onYouTubePlayerAPIReady = onPlayerRady; 
      } else if (YT.loaded) { 
       onPlayerRady(); 
      } else { 
       YT.ready(onPlayerRady); 
      } 

      function onPlayerRady() { 
       console.log('Creating player'); 
       var player = new YT.Player(element.attr('id'), { 
        height: '390', 
        width: '640', 
        videoId: 'GE2BkLqMef4', 
        events: { 
         'onReady': onPlayerReady, 
          'onStateChange': onPlayerStateChange 
        } 
       }); 
      } 

      console.log(YT.loaded); 
      // autoplay video 
      function onPlayerReady(event) { 
       console.log('autoplay'); 

       event.target.playVideo(); 
      } 

      // when video ends 
      function onPlayerStateChange(event) { 
       if (event.data === 0) { 
        console.log('finsihed'); 

        alert('done'); 
       } 
      } 

     } 
    } 
}]); 

Demo