javascript - 如何使用 Froogaloop Angularjs 从 vimeo 添加多个视频

Question

我正在尝试使用 vimeo Javascript 库“Froogaloop”为视频中的视频数组添加一些功能（“停止”、“暂停”、“onFinish”）。

任何人都知道如何在AngularJs中做到这一点？

Answer 1

在 HTML 上，您有这样的代码：

<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 它是包含您要筛选的视频信息的数组，不要忘记在 ng-repeat 标签上添加“track by index”。

在控制器上：您将拥有这样的功能：

$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;
  };

视频完成后，它将在控制台上打印视频对象。Youi可以添加'onPause'或'onPlayProgress'之类的功能。