How to add multiple videos from vimeo with Froogaloop Angularjs

Question

I'm trying to add some functions('stop', 'pause', 'onFinish') for an array of video from video, using the vimeo Javascript library 'Froogaloop'.

Anyone know how to do it in AngularJs?

Answer 1

On the HTML you have a code like this:

<div class="modulo-textos" ng-repeat="video in videos track by $index">
  <iframe id="player{{$index + 1}}" ng-src="{{getVideoUrl(video, $index)}}" width="100%" height="350px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

videos it's the array with the information of the video you want to screen, don't forget to add the 'track by index' on the ng-repeat tag.

On the controller: you will have a a function like this one:

$scope.getVideoUrl = function(video, index) {
   var player_id = 'player' + (index + 1);
   var video_url = 'https://player.vimeo.com/video/' + video.video_id + '?api=1&player_id=' + player_id;
   var player = '#' + player_id;
   var iframe = $(player)[0];
   var player = $f(iframe);
   player.addEvent('ready', function() {
     player.addEvent('finish', onFinish);
   });
   function onFinish() {
     console.log(video);
    };
   return video_url;
  };

When the video if finished it will print on the console the video object. Youi can add function like 'onPause' or 'onPlayProgress'.