Angularjs HTML5 视频已结束

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

我相信下面的代码会实现你想要的。

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

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

另一种选择是添加单独的指令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 4

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 5

在这个问题上工作了一段时间，发现一个对我有用的相同问题的破解方法。使用 jQuery $timeOut 函数（您也可以使用 vanilla JS 超时，我发现两者都是典型的 angular hack），以及 html5 视频事件：“duration”、“currentTime”和“timeupdate”，您可以了解更多关于here。使用这些事件值，您可以计算视频的结束并模拟 html5 视频“结束”事件。这是代码

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 6

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

var jq = $;

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