Question

我有一个社交媒体供稿，用户可以在其中发布视频。我想在视频使用AngularJS进行缓冲时添加一个微调器。这是HTML部分：

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

这是我的剧本：

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用于触发每个单独媒体（视频）的ng-show，因此当视频正在等待＆＃39; （缓冲）它应该显示微调器，当它在'#pla;＆＃39;把它藏起来。只要我在特定帖子中只有一个视频，它就能很好地工作，但是当一个帖子中有多个视频时，微调器只显示在最后一个视频上。任何帮助表示赞赏。

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

在社交媒体帖子中缓冲时的视频加载器（angularJS）

2 个答案: