Событие Froogaloop Vimeo «завершение» в директиве Angular

У меня проблема с запуском события Vimeo "Finish" в моей директиве Angular. Видео Vimeo загружается, и функции воспроизведения и паузы работают правильно.

Мой код HTML

<vimeo control-boolean="isPlaying" vid="{{videoslist[id].code}}" pid="1"></vimeo>
<button ng-click="prevVid()">Prev</button>
<button ng-if="isPlaying" ng-click="status()">Pause</button>
<button ng-if="!isPlaying" ng-click="status()">Play</button>
<button ng-click="nextVid()">Next</button>
<div class="videoInfo">
  <h2>{{videoslist[id].title}}</h2>
  <p>{{videoslist[id].discription}}</p>
</div>

Моя директива AngularJS

directive('vimeo', function($sce) {
  return {
      restrict: 'EA',
      replace: true,
      scope: {
        //Assumes that true means the video is playing
        controlBoolean: '='
      },
      template: '<iframe id="video"></iframe>',
      link: function postLink(scope, element, attrs) {
        attrs.$observe('vid', function(value) {
          var url = "http://player.vimeo.com/video/" + attrs.vid + "?title=0&byline=0&portrait=0&api=1&autoplay=true";
          element.attr('src', url);
          var iframe = element[0],
          player = $f(iframe);
          player.addEvent("ready", function() {        
            player.addEvent('finish', onFinish);
          });
          function onFinish() {
            console.log("vimeo finish")
          }
        scope.$watch('controlBoolean', function(){
          if(scope.controlBoolean){
            player.api('play');
          }
          else{
            player.api('pause');
          }
        });
        });

      }
    };
  });

В директиве выше эта строка должна вызвать событие, но это не так:

player.addEvent("ready", function() {        
  player.addEvent('finish', onFinish);
});
function onFinish(id) {
  console.log("vimeo finish")
}

Я использовал это, чтобы помочь мне с директивой: http://embed.plnkr.co/GKWNk3LhX0MR3lhpfqyA/preview

И веб-сайт Vimeo, чтобы прочитать о том, «Как инициировать события»: http://developer.vimeo.com/player/js-api

Кто-нибудь видит, что я делаю неправильно?


angularjs vimeo angularjs-directive froogaloop
person zuiderveen    schedule 27.06.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы должны добавить код для событий finish и ready внутри, например:

scope.$watch('controlBoolean', function(){
           if(scope.controlBoolean){
              player.api('play');
              player.addEvent("ready", function() {  
                 console.log("vimeo ready");
                 player.addEvent('finish', onFinish);
              });
         } else {
           player.api('pause');
         }
       });

Я модифицировал плункер, и это сработало для меня.

person Rash    schedule 21.08.2014