HTML5 Canvas action at the end of a video

[philippem81468890]

Hello everybody,

I'm using Animate HTML5 Canvas project with a component Video into a frame on the timeline (full screen).

Now I need to do a "GotoAndStop" at a certain frame once the video is ended.

How can I do that ?

Best regards

[JoãoCésar · Accepted solution]

Hi.

This should work (the loop property of the Video component must be set to false) :

var root = this;
var videoID = "yourVideoID"; // the id is set in the Properties panel when the video component is selected
var video;

function drawEndHandler()
{
	video = document.getElementById(videoID);
	video.addEventListener("ended", endedHandler);
}

function endedHandler()
{
	video.removeEventListener("ended", endedHandler);
	root.gotoAndStop(1);
}

root.stop();
stage.on("drawend", drawEndHandler, null, true);

I hope it helps.

Regards,

JC

[philippem81468890]

Just perfect, working so fine.

It's magical 🙂

Thank you, all best

Philippe