ソーシャルメディア投稿（angularJS）でバッファリングするときのビデオローダー

Question

私は、ユーザーがビデオを投稿できるソーシャルメディアフィードを持っています。 AngularJSを使用してビデオがバッファリングされている間、スピナーを追加したいと思います。

for (var i = 0; i < scope.videos.length; i++) { 
var video = scope.videos[i]; 
video.loading = false; 
var videoElement = angular.element(document.getElementById(video.Id))[0]; 

videoElement.onplaying = function() { 
    video.loading = false; 
    scope.$apply(); 
}; 

videoElement.onwaiting = function() { 
    video.loading = true; 
    scope.$apply(); 
}; 

}

だから私は、メディアから動画をロードしていて、トリガーに 'ロード' のparamを設定します。これは私のスクリプトです

<div class="media-list-item col-xs-12" ng-repeat="media in ::videos"> 
    <div class="embed-responsive embed-responsive-16by9"> 
     <video controls oncontextmenu="return false;" 
       class="embed-responsive-item" frameborder="0" allowfullscreen preload="auto" 
       id="{{media.Id}}"> 
      <source ng-src="{{::media.Url | trustAsResourceUrl}}" /> 
     </video> 
     <i class="fa fa-spinner fa-pulse videoLoader" ng-show="media.loading" aria-hidden="true"></i> 
    </div> 
</div> 

： これはHTMLの一部であり、それぞれ別々のメディア（ビデオ）のng-showが表示されるので、ビデオが「待っている」（バッファリング中）のときは、スピナーを表示する必要があります。 特定の投稿に1つの動画しかないときはいつでも完全に機能しますが、1つの投稿に複数の動画がある場合は、最後の動画にのみスピナーが表示されます。どんな助けもありがたい。

Answer 1

問題は、内部関数（イベントハンドラ）が同じビデオ変数を参照しており、呼び出し時に最後のビデオアイテムと等しいことです。この問題を解決するには、ビデオ変数の宣言からループボディスコープを分離する必要があります。あなたが個人的にIIFE、forEachなどを使用することができ、私はあなたがスコープのコンテキストを変更するための.bindを使用することをお勧めします：

for (var i = 0; i < scope.videos.length; i++) { 
    var video = scope.videos[i]; 
    video.loading = false; 
    var videoElement = angular.element(document.getElementById(video.Id))[0]; 

    videoElement.onplaying = function (video) { 
     video.loading = false; 
     scope.$apply(); 
    }.bind(this, video); 

    videoElement.onwaiting = function (video) { 
     video.loading = true; 
     scope.$apply(); 
    }.bind(this, video); 
} 

Answer 2

ただ、ここで注意することは、研究の数時間後にこれに対する別の解決策は、他の中でカプセル化された機能を分離することです機能によって、THIS答え：

for (var i = 0; i < scope.videos.length; i++) { 
var video = scope.videos[i]; 
video.loading = false; 

var videoElement = angular.element(document.getElementById(video.Id)); 
videoElement.on('playing', videoOnPlaying(video)); 
videoElement.on('waiting', videoOnWaiting(video)); 

function videoOnPlaying(video) { 
return function() { 
    video.loading = false; 
    scope.$apply(); 
}; } 

function videoOnWaiting(video) { 
return function() { 
    video.loading = true; 
    scope.$apply(); 
}; } }