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

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

Community Beginner ,
Jan 09, 2020 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.

TOPICS
ActionScript

Views

2.7K

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
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
...

Votes

Translate

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

Votes

Translate

Translate
LEGEND ,
Jan 09, 2020 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?

Votes

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
community guidelines
Community Beginner ,
Jan 09, 2020 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.

 

Votes

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
community guidelines
LEGEND ,
Jan 09, 2020 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?

Votes

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
community guidelines
Community Beginner ,
Jan 09, 2020 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. 

Votes

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
community guidelines
LEGEND ,
Jan 09, 2020 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.

Votes

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
community guidelines
Community Beginner ,
Jan 09, 2020 Jan 09, 2020

Copy link to clipboard

Copied

Confirmed, the ID is assigning correctly - 

 

confirmed.png

Votes

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
community guidelines
LEGEND ,
Jan 09, 2020 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'>");

Votes

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
community guidelines
Community Beginner ,
Jan 09, 2020 Jan 09, 2020

Copy link to clipboard

Copied

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

 

Votes

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
community guidelines
Community Expert ,
Jan 09, 2020 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

Votes

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
community guidelines
Community Beginner ,
Jan 09, 2020 Jan 09, 2020

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Community Expert ,
Jan 09, 2020 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.

Votes

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
community guidelines
Community Beginner ,
Nov 09, 2020 Nov 09, 2020

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Community Expert ,
Nov 10, 2020 Nov 10, 2020

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Community Beginner ,
Nov 10, 2020 Nov 10, 2020

Copy link to clipboard

Copied

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! 

Votes

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
community guidelines
Community Beginner ,
Nov 10, 2020 Nov 10, 2020

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Community Expert ,
Nov 10, 2020 Nov 10, 2020

Copy link to clipboard

Copied

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?

Votes

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
community guidelines
Community Beginner ,
Nov 10, 2020 Nov 10, 2020

Copy link to clipboard

Copied

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. 

Votes

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
community guidelines
Community Beginner ,
Nov 10, 2020 Nov 10, 2020

Copy link to clipboard

Copied

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

Votes

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
community guidelines
LEGEND ,
Nov 10, 2020 Nov 10, 2020

Copy link to clipboard

Copied

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

 

Votes

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
community guidelines
New Here ,
Nov 25, 2020 Nov 25, 2020

Copy link to clipboard

Copied

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?

Votes

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
community guidelines
Community Expert ,
Nov 10, 2020 Nov 10, 2020

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Community Beginner ,
Nov 10, 2020 Nov 10, 2020

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Community Expert ,
Nov 10, 2020 Nov 10, 2020

Copy link to clipboard

Copied

Excellent! You're welcome!

Votes

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
community guidelines