How to detect the end of a video in a component before playing next frame

[Bryon.Taylor]

We have a project that plays a short 1 minute video component with the intention of moving to the next frame after it plays (Animate Canvas). There are a couple of threads that detail some information, but none seem relevant to my particular project and are not working for me after reent update. The intention is to stop the fram at the video component in the middle of the timeline, play a one minute video, then proceed to play the rest of the timeline after the video has ended. With recent December update to Animate, previous methods detailed to accomplish this no longer work. Does anyone know of a working function to do this?

Thank you in advance, I've been trying to solve this for weeks now.

[ClayUUID]

So you're saying you've already added an event listener to the video component's video element for the media ended event, and it's not firing?

[Bryon.Taylor]

Correct - I've tried several of the event listeners listed in the forums, one of them worked well for me prior to the 20.0.1 update, but post that update they are no longer working and I am getting desperate. That code was:

_this.videoDetect_mc.on("added", function () {

    $("#videoDetect_mc").on("ended", function () {

        _this.gotoAndPlay(10);

    });

});

I should note that the reason I believe the update broke it somehow is that it still works in currently published files, but publishing it post the update, it no longer works. Setting an alert("test"); as the action does not display post video as well, so for some reason it is no longer detecting the end of the video.

[ClayUUID]

Sounds like the listener isn't even getting assigned. What if you put an alert() inside your on "added" handler?

[Bryon.Taylor]

Thanks for the reply -so when I try an alert() inside the added handler, it alerts appropriately when the video loads. 

[ClayUUID]

Okay then, when the video is playing, use the browser's inspector to see if the video element has the correct ID assigned. And/or putting $("#videoDetect_mc") inside your added alert statement might provide useful output.

[Bryon.Taylor]

Confirmed, the ID is assigning correctly - 

[ClayUUID · Accepted solution]

Well I'm out of ideas. Maybe don't use the video component at all? Manually adding a video element floated over the stage is just a few lines of JavaScript. This is the code I've posted around here a few times. Doesn't work with "responsive" canvases though.

// Create a DIV layer above the canvas
// Accepts ID, X, Y, width, height, HTML content, and CSS styling (optional)
// CSS styling is a CSS-formatted literal string
mkDiv = function(id, x, y, w, h, html, css) {
	var d = document.createElement("div");
	d.id = id;
	d.style.cssText = "position:absolute; left:" + x + "px; top:" + y + "px; width:" + w + "px; height:" + h + "px; overflow:auto;" + (css ? css : "");
	d.innerHTML = html;
	canvas.parentNode.appendChild(d);
}

// Remove an element by ID name
rmDiv = function(id) {
	try {
		var elem = document.getElementById(id);
		elem.parentNode.removeChild(elem);
	}
	catch(e) {}
}

Then call like mkDiv("myVideo", 100, 100, 320, 240, "<video src='bacon.mp4'>");

[Bryon.Taylor]

This will help, thanks - going to try this method now, I appreciate your time. 

[JoãoCésar · Accepted solution]

Hi.

This works for me.

setTimeout(function()
{
	var video = document.getElementById("video0"); // "video0" is the video component instance name
	
	video.addEventListener("ended", function()
	{
		console.log("video ended");
	});
	
}, 0);

I'm using version Animate 20.0.1 (Build 19255)

The loop property should be turned off for this event to work.

Regards,

JC

[Bryon.Taylor]

This works! Thanks for this, really appreciate you taking the time. 

[JoãoCésar]

Oh. Forgot to say that the loop property should be turned off for this event to work.

[jeffp81970431]

Hello, I'm working in Animate 21.0 and running into an issue as well. I want to detect when the video has ended and revert back to frame 1 of the timeline. I've placed the video in with Components and the Loop function is turned off.

[JoãoCésar]

Hi.

Please place this code in the frame where the video component instance is located and it should work:

setTimeout(function()
{
	var video = document.getElementById("video0"); // "video0" is the video component instance name
	
	video.addEventListener("ended", function()
	{
		exportRoot.gotoAndStop(0);
	});
	
}, 0); // in some cases this delay may be set to a higher value, like 100, 300...

Please let us know.

Regards,

JC

[jeffp81970431]

Hmm, I must be doing something wrong. I've pasted the code into the same frame as the video component and changes the video component instance name (not the movie clip name). If it helps, I have uploaded the project here...

http://shiftmedia.ca/demo/overview_en.html

Thanks again for your help! 

[jeffp81970431]

Sorry, I should have mentioned that I only put the code in for the HOME button instance. 

[JoãoCésar]

It's harder to tell what's going on without examining the FLA, but it seems to me your video component instance is called homeVIDEO and not home-video.

Can you double-check this?

[jeffp81970431]

Hmm I've made the adjustment and I'm still running into the same issue. I've updated the files to that same link to have a look. 

[jeffp81970431]

[ClayUUID]

Using a timer to wait for a component to initialize is an unreliable, hackish solution. The proper way is to listen for the component to declare that it's ready.

this.myVideo.addEventListener("added", function() {
	$("#myVideo").off("ended").on("ended", function() {
		alert("done!");
	})
});

Or if you'd prefer code that's more maintainable than clever:

this.myVideo.addEventListener("added", initVideo);

function initVideo() {
	$("#myVideo").off("ended").on("ended", videoEnded);
}

function videoEnded() {
	alert("done!");
}

[AlexFeil]

Hey ClayUUID.

I fell the same way by adding the setTimeout as you do, but that's the only way it works for me. I wish I could use "the right way", but everything I tried with the "added" event was not working.
When I add the eventListener on Frame 0 without setTimeout, I get an error because the VideoComponent is not initialized at that moment. If I try it with your method and add an listener("added") on the VideoComponent it never catches an event!? I think that could be some kind of concurrency-issue!?

Any idea?

[JoãoCésar]

Nice!

Have you tried a higher delay? Instead of using 0, try something like 1000 or 2000 and see if it works. If it does, try to find a lower value that fits your needs. I know this is a poor workaround, but for now it should do the job.

[jeffp81970431]

The 1000 adjustement is working great now!! Thank you so much!!

[JoãoCésar]

Excellent! You're welcome!