Question

我正在加载html5 mp4视频，我希望在视频结束时从角度范围触发功能。我试过下面简单的代码，但是onended事件在角度范围内找不到函数。有任何建议请。

HTML

<video controls="controls" autoplay="true" ng-show="showVideo" ng-src="{{vidSrc}}" vid-dir onended="vidEnded()">

在主控制器中添加Angularjs功能。触发了onended事件，但函数未定义

$scope.vidEnded = function(){
        console.log('vid ended')
    }

还尝试在目录中添加功能，但不会触发该功能。

.directive('vidDir', [function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attr) {
            console.log(elem)
            elem.onended = function(){
                console.log('vid ended')
            } 
        }
    };
}]);

由于

Answer 1

use this.vidEnded();
    .directive('vidDir', [function () {
        return {
            restrict: 'A',
            link: function (scope, elem, attr) {
                console.log(elem)
                this.vidEnded= function(){
                    console.log('vid ended')
                } 
            }
        };
    }]);

Answer 2

在角度函数前添加以下内容：

angular.element(this).scope().vidEnded()

结果：

<video controls="controls" autoplay="true" ng-show="showVideo" ng-src="{{vidSrc}}" vid-dir onended="angular.element(this).scope().vidEnded()">

Answer 3

在这个问题上工作了一段时间，并找到了对我有用的同样问题的黑客攻击。使用jQuery $ timeOut函数（你也可以使用vanilla JS超时，两者都是我发现的角度的典型黑客）和html5视频事件：＆＃34; duration＆＃34;，＆＃34; currentTime＆＃34;，和＃34; timeupdate＆＃34;，您可以了解有关here的更多信息。使用这些事件值，您可以计算视频的结尾并模拟html5视频＆＃34;结束＆＃34;事件。这是代码

myCtrl.myVideo = document.getElementbyId("my-video-id"); //you need to have an id for your html5 video

//function to define in the controller

myCtrl.videoListener = function()
{

 //javascript event listener function

 myCtrl.myVideo.addEventListener('timeupdate', 
 function() 
 {

     myCtrl.myVideo = this; //define "this"

     var videoDuration = this.duration;
     var videoCurrentTime = this.currentTime;


     if (videoCurrentTime >= videoDuration)
     {

       //wrapping in a $timeOut function is the only way this works!

        $timeout(function(){
          //do something when the video ends, set variables, etc.
        }, 0); 
     } 
     else if (videoCurrentTime < videoDuration)
     {

        //wrapping in a $timeOut function is the only way this works.

        $timeout(function(){
          //do something while the video is playing, set variables, etc.
        }, 0); 
     }

  });

}

Answer 4

我相信以下代码可以实现您想要的。

<video controls="controls" autoplay="true" ng-show="showVideo" ng-src="{{vidSrc}}" vid-dir (ended)="vidEnded()">

Answer 5

另一种选择是添加单独的指令 on-ended 而不是实际的 onended，如下所示：

/**
 * Handles onended event for video tags.
 * @example <video on-ended="awesomeFn()">
 */
.directive('onEnded', function () {
  return {
    scope: {
      onEnded: '&'
    },
    link: function (scope, element) {
      element.on('ended', scope.onEnded);
    }
  };
});

Answer 6

您实际上不需要指令或插件来运行onended事件。（如果集成了jquery）这是在控制器中添加的一些逻辑。如果您已经有一个属性，请确保视频代码具有Id.remove on on ended属性。然后在你的控制器中添加这个

＆＃13;

var jq = $;

jq('#IdOfVideo').on('ended', function(){
 //Whatever you want to happen after it has ended
});

＆＃13;

Angularjs HTML5视频开始了

6 个答案: