Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

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

Community Beginner ,
Jan 09, 2020 Jan 09, 2020

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.

TOPICS
ActionScript
4.5K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 2 Correct answers

LEGEND , Jan 09, 2020 Jan 09, 2020

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.createElemen
...
Translate
Community Expert , Jan 09, 2020 Jan 09, 2020

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

Translate
LEGEND ,
Jan 09, 2020 Jan 09, 2020

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?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 09, 2020 Jan 09, 2020

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.

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 09, 2020 Jan 09, 2020

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 09, 2020 Jan 09, 2020

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 09, 2020 Jan 09, 2020

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 09, 2020 Jan 09, 2020

Confirmed, the ID is assigning correctly - 

 

confirmed.png

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 09, 2020 Jan 09, 2020

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 09, 2020 Jan 09, 2020

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

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 09, 2020 Jan 09, 2020

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 09, 2020 Jan 09, 2020

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 09, 2020 Jan 09, 2020

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 09, 2020 Nov 09, 2020

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 10, 2020 Nov 10, 2020

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 10, 2020 Nov 10, 2020

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! 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 10, 2020 Nov 10, 2020

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 10, 2020 Nov 10, 2020

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?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 10, 2020 Nov 10, 2020

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. 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 10, 2020 Nov 10, 2020

Screen Shot 2020-11-10 at 11.22.08 AM.pngScreen Shot 2020-11-10 at 11.22.23 AM.png

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 10, 2020 Nov 10, 2020

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

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 25, 2020 Nov 25, 2020
LATEST

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?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 10, 2020 Nov 10, 2020

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 10, 2020 Nov 10, 2020

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 10, 2020 Nov 10, 2020

Excellent! You're welcome!

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