Embed Vimeo video using AngularJS directive

问题

I have a partial HTML page in an AngularJS app that I'm trying to add a vimeo video to. This template has an image and play button that fades out on click to show the underlying iFrame. I also want this click trigger to play the video, so that someone doesn't have to press two play buttons.

The div in my partial page template where this is happening working version of site here:

<div id="container" >

    <div id="dummy"></div>
    <div id="element">

    <iframe id="player" class="fade {{playerFade}}" ng-src="http://player.vimeo.com/video/{{person.video}}?api=1&amp;player_id=player&amp;wmode=opaque" frameborder="0" allowfullscreen></iframe>

    <img id="person_photo" class="fade {{person_photoFade}}" ng-src="{{person.photo_small}}" ng-src-responsive="[ [ '(min-width: 720px)', '{{person.photo_medium}}' ], [ '(min-width: 960px)', '{{person.photo_large}}' ], [ '(min-width: 1200px)', '{{person.photo_extralarge}}' ] ]" />

    <a id="playButton" ng-click="playing=true"  class="fade {{playButtonFade}}" ><img src="img/furniture/play.png" class="img_play" alt="play button"/></a>
    </div>

</div>

Now, I did get this to work once, but that was with a static, non-Angular web page. The code I used to interact with the Vimeo API is something I took from SO#8444240. They were trying to figure out preloading. Since I have so many videos, I'm not interested in that, I just used this code to get my button interacting with my video.

I tried putting this script into my index.html page, but since it is removed from Angular, it doesn't work at all. I think I need a directive. Here is the current script code I have:

<script>  

 //INIT Vimeo API

var vimeoPlayers = document.querySelectorAll('#player'),
    player;

for (var i = 0, length = vimeoPlayers.length; i < length; i++) {
    player = vimeoPlayers[i];
    $f(player).addEvent('ready', ready);
}

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);
    } else {
        element.attachEvent(eventName, callback, false);
    }
}

function ready(player_id) {
    // Keep a reference to Froogaloop for this player
    var container = document.getElementById(player_id).parentNode.parentNode, 
        froogaloop = $f(player_id);

    $('#playButton a').click(function(){

        $('#person_photo').fadeOut('12000');
        froogaloop.api('play');

        return false;   

    });                

}

</script>

I've got a directive that controls the playbutton to fade it out (thanks to wmluke on a previous question) but I don't know how to translate this javascript into a directive. Here is my controller, too.

function DetailCtrl($scope, $routeParams, $http) {
  $http.get('person.json').success(function(data) {
    angular.forEach(data, function(person) {
          if (person.id == $routeParams.personId) 
            $scope.person = person;
        });
    });

  $scope.playing = false;

  // Update the *Fade scope attributes whenever the `playing` scope attribute changes
  $scope.$watch('playing', function (playing) {
        $scope.playerFade = playing ? 'in' : '';
        $scope.person_photoFade = playing ? '' : 'in';
        $scope.playButtonFade = playing ? '' : 'in';
  });

I tried writing this directive as best I could, but I don't know how to handle the ready calls to Vimeo API. It seems like there is a better way to do it in Angular.

来源：https://stackoverflow.com/questions/17216884/embed-vimeo-video-using-angularjs-directive

标签

angularjs

angularjs-directive

vimeo