html5 onended,html - Angularjs HTML5 Video onended - Stack Overflow

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

}

});

}