2

我正在尝试向其中添加 vimeo 视频的 AngularJS 应用程序中有一个部分 HTML 页面。此模板有一个图像和播放按钮，单击时会淡出以显示底层 iFrame。我还希望这个点击触发器播放视频，这样就不必按两个播放按钮了。

我的部分页面模板中的 div 发生这种情况的网站的工作版本在这里：

<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 中有更好的方法来做到这一点。

4

0 回答 0