Question

我在AngularJS应用中有一个部分HTML页面，我正在尝试添加vimeo视频。此模板有一个图像和播放按钮，在单击时淡出以显示基础iFrame。我也希望这个点击触发器播放视频，这样有人就不必按两个播放按钮。

我的部分页面模板中的div 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>

现在，我确实让它工作了一次，但那是一个静态的，非Angular的网页。我用来与Vimeo API交互的代码是我从SO＃8444240中获取的代码。他们试图弄清楚预加载。由于我有这么多视频，我对此并不感兴趣，我只是用这段代码让我的按钮与我的视频互动。

我尝试将此脚本放入我的index.html页面，但由于它已从Angular中删除，因此根本不起作用。我想我需要一个指令。这是我当前的脚本代码：

<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>

我有一个控制播放按钮的指令淡出它（感谢wmluke on a previous question）但我不知道如何将这个javascript翻译成指令。这也是我的控制器。

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';
  });

我尝试尽可能地编写此指令，但我不知道如何处理对Vimeo API的就绪调用。似乎在Angular中有更好的方法。

使用AngularJS指令嵌入Vimeo视频

0 个答案: