Angularjs HTML5 Video onended

I believe the following code would achieve what you desire.

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

Add the following in front of your angular function:

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

The result:

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

Another option would be to add a separate directive on-ended instead of the actual onended, like this:

/**
 * 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);
    }
  };
});

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

Worked at this issue for a while and found a hack to the same problem that worked for me. Uses jQuery $timeOut function (you could also use the vanilla JS timeout, both are a typical hack with angular I find), and the html5 video events: "duration", "currentTime", and "timeupdate", which you can learn more about here. Using those event values you can calculate the end of the video and simulate the html5 video "ended" event. Here's the code

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

  });

}

You actually do not need a directive or plugin to run the onended event.(if jquery is integrated) Here is some logic to add in your controller. Make sure the video tag has an Id.remove the on ended attribute if you already have one in there. Then within your controller add this

var jq = $;

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