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

I need to control the time of the video.

Community Beginner ,
Apr 08, 2020 Apr 08, 2020

Copy link to clipboard

Copied

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?

TOPICS
Timeline

Views

971

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

Community Expert , Apr 09, 2020 Apr 09, 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(
...

Votes

Translate

Translate
Community Expert , Apr 14, 2020 Apr 14, 2020

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

Votes

Translate

Translate
Community Expert ,
Apr 09, 2020 Apr 09, 2020

Copy link to clipboard

Copied

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

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 ,
Apr 09, 2020 Apr 09, 2020

Copy link to clipboard

Copied

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?

 

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 ,
Apr 09, 2020 Apr 09, 2020

Copy link to clipboard

Copied

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

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 ,
Apr 09, 2020 Apr 09, 2020

Copy link to clipboard

Copied

Hi JC.
The questions you talked about are ok.
Please see the image:

Captura de Tela 2020-04-09 às 11.59.32.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
Community Expert ,
Apr 09, 2020 Apr 09, 2020

Copy link to clipboard

Copied

Everything seems to be OK.

 

Can you share your FLA?

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 ,
Apr 09, 2020 Apr 09, 2020

Copy link to clipboard

Copied

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 ,
Apr 13, 2020 Apr 13, 2020

Copy link to clipboard

Copied

Hello guys!
Could someone help me with this problem?

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 ,
Apr 14, 2020 Apr 14, 2020

Copy link to clipboard

Copied

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

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 ,
Apr 14, 2020 Apr 14, 2020

Copy link to clipboard

Copied

Hello Friend!
Now it worked.
Thank you!
Helped me a lot.
Big hug and success to you.

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 ,
Apr 14, 2020 Apr 14, 2020

Copy link to clipboard

Copied

LATEST

Excellent!

 

You're welcome!

 

A huge success to you too!

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