Skip to main content
B
Bryon.Taylor
Participating Frequently
January 9, 2020
Answered

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

  • January 9, 2020
  • 3 replies
  • 5117 views

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.

This topic has been closed for replies.
Correct answer JoãoCésar17023019

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

3 replies

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community Expert
Community Expert
January 9, 2020

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

    jeffp81970431
    jeffp81970431
    Participating Frequently
    November 10, 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.

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    November 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

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community ExpertCorrect answer
    Community Expert
    January 9, 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

      B
      Bryon.TaylorAuthor
      Participating Frequently
      January 9, 2020

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

        C
        ClayUUID
        Legend
        January 9, 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?

        B
        Bryon.TaylorAuthor
        Participating Frequently
        January 9, 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.

         

        C
        ClayUUID
        Legend
        January 9, 2020

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

          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices