angularjs - AngularJS ディレクティブを使用して Vimeo ビデオを埋め込む

Question

Vimeo ビデオを追加しようとしている AngularJS アプリに部分的な HTML ページがあります。このテンプレートには、クリックするとフェードアウトして基になる iFrame を表示する画像と再生ボタンがあります。また、誰かが 2 つの再生ボタンを押す必要がないように、このクリックトリガーでビデオを再生したいと考えています。

これが起こっている私の部分ページテンプレートの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>

さて、私はこれを 1 回動作させましたが、それは静的で非 Angular の Web ページでした。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 に感謝します) が、この 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 - AngularJS ディレクティブを使用して Vimeo ビデオを埋め込む

0 に答える 0

Related

Reference