Angular.js Directive for Vimeo Player

0-README.md

Angular.js Directive for Vimeo Player

• Supports all embed parameters, API methods and events
• Requires Froogaloop

Usage

In your controller

$scope.video = {
  properties: {
    autoplay: true,
    api: true
  },
  events: {
    ready: function () {
      this.api('setVolume', 1.0);
      this.api('getDuration', function (duration) {
        $scope.duration = Math.floor(duration / 60);
      });
    },
    finish: function () {
      $scope.finished = true;
    }
  }
};

In your view

<bs-vimeo-player
    video-id="42615527"
    properties="video.properties"
    events="video.events"
></bs-vimeo-player>

1-vimeo-player.js

(function (angular, $f) {

  'use strict';

  angular.module('betsol.directive.vimeoPlayer', [])
    .directive('bsVimeoPlayer', function ($timeout) {
      return {
        restrict: 'E',
        templateUrl: 'vimeo-player.html',
        scope: {
          videoId: '@',
          properties: '=',
          events: '='
        },
        link: function ($scope, $directiveElement) {
          if (!$f) {
            // Froogaloop is not available.
            return;
          }
          if (!$scope.properties.api || !$scope.events) {
            // API is not enabled on the player or events are not specified.
            return;
          }
          var frameElement = $directiveElement.find('iframe')[0];
          var player = $f(frameElement);

          player.addEvent('ready', function () {
            var eventArgs = arguments;
            if ('function' === typeof $scope.events.ready) {
              // Calling "ready" event.
              $timeout(function () {
                $scope.events.ready.call(player, eventArgs);
              });
            }
            angular.forEach($scope.events, function (eventHandler, eventName) {
              if ('ready' == eventName) {
                return;
              }
              if ('function' !== typeof eventHandler) {
                return;
              }
              player.addEvent(eventName, function () {
                var eventArgs = arguments;
                // Calling custom event.
                $timeout(function () {
                  $scope.events[eventName].call(player, eventArgs);
                });
              });
            });
          });

        },
        controller: function (
          $scope,
          $sce,
          $httpParamSerializer
        ) {
          $scope.frameSrc = $sce.trustAsResourceUrl(
            '//player.vimeo.com/video/' + $scope.videoId +
            '?' + $httpParamSerializer($scope.properties)
          );
        }
      };
    })
  ;

})(angular, window.Froogaloop || undefined);

2-vimeo-player.html

<iframe
    ng-src="{~ frameSrc ~}"
    frameborder="0"
    webkitallowfullscreen
    mozallowfullscreen
    allowfullscreen
></iframe>