Skip to main content
J
Julianorocha
Participating Frequently
April 8, 2020
Answered

I need to control the time of the video.

  • April 8, 2020
  • 1 reply
  • 1482 views

I have a video that is played by the Adobe Animate video component. I would like that after the end of this video, the animation moves forward one frame. I need to control the time of the video. Does anyone know if this is possible in HTML5?

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

Hello guys!
Could someone help me with this problem?


Hi again! Sorry for the long delay!

 

It turns out that the problem is much more simple than it seemed.

 

At frame 50 (49) when you write:

function fl_ClickToGoToAndPlayFromFrame_3()
{
    this.gotoAndPlay(51);
}

 

It should be:

function fl_ClickToGoToAndPlayFromFrame_3()
{
    this.gotoAndPlay(50);
}

 

Because in HTML5 documents the first frame index is 0. The way it was before, the code to detect the end of the video was never being executed.

 

I hope it helps.

 

 

Regards,

JC

1 reply

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

Hi.

 

The HTML5 video component in Animate CC is basically a jQuery wrapper for the standard html video element. This means you can dectect the end of the video playback using the regular ended event. Your code could be something like this:

var targetTimeline = this;
var targetFrame = 4;
var targetTime = 3; // time in seconds

targetTimeline.stop();

setTimeout(function()
{
	var video = document.getElementById("video0"); // "video0" is the video component instance name
	
	video.addEventListener("ended", function(e)
	{
		console.log("video ended");
		targetTimeline.gotoAndStop(targetFrame); // move the target timeline to the desired frame
		e.currentTarget.currentTime = targetTime; // set the video's time position
	});
	
}, 0);

 

Please notice that the video component cannot be set to loop for the ended event to be dispatched.

 

 

Regards,

JC

J
JulianorochaAuthor
Participating Frequently
April 9, 2020

Hello John.
Thank you so much for your response.
I made the code this way:

 

var targetTimeline = this;
var targetFrame = 55;
var targetTime = 17; // time in seconds

targetTimeline.stop();

setTimeout(function()
{
	var video = document.getElementById("objetivo_compliance"); // "video0" is the video component instance name
	
	video.addEventListener("ended", function(e)
	{
		console.log("video ended");
		targetTimeline.gotoAndPlay(targetFrame); // move the target timeline to the desired frame
		e.currentTarget.currentTime = targetTime; // set the video's time position
	});
	
}, 0);

But after the end of the video, the timeline didn't go until frame 55.
Did I do something wrong?

 

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

You're welcome.

 

Please tell me if these items are OK:

- Is your video set to be looped? If it is, please turn the loop off;

- Is "objetivo_compliance" a name you assigned to the video component by selecting it and using the Properties panel (Ctrl/Cmd + F3)?

- Does your timeline have 56 frames? Remember that in HTML5 documents the first frame has a index of 0. So 55 is the index of the 56th frame.

 

Please let me know.

 

 

Regards,

JC

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