Highlighted

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

Community Beginner ,
Jan 09, 2020

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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

TOPICS
ActionScript

Views

237

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Community Beginner ,
Jan 09, 2020

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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

TOPICS
ActionScript

Views

238

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 09, 2020 0
Adobe Community Professional ,
Jan 09, 2020

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2020 0
Community Beginner ,
Jan 09, 2020

Copy link to clipboard

Copied

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.

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2020 0
Adobe Community Professional ,
Jan 09, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2020 1
Community Beginner ,
Jan 09, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2020 0
Adobe Community Professional ,
Jan 09, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2020 0
Community Beginner ,
Jan 09, 2020

Copy link to clipboard

Copied

Confirmed, the ID is assigning correctly - 

 

confirmed.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2020 0
Adobe Community Professional ,
Jan 09, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2020 0
Community Beginner ,
Jan 09, 2020

Copy link to clipboard

Copied

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

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2020 0
Adobe Community Professional ,
Jan 09, 2020

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2020 2
Community Beginner ,
Jan 09, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2020 1
Adobe Community Professional ,
Jan 09, 2020

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2020 1