HTML5/Canvas: I'm trying to add a listener that will move the playhead to a frame when video ends

Explorer ,
Apr 22, 2021 Apr 22, 2021

Copy link to clipboard

Copied

Hello. I'm trying to add an event listener that will move the playhead to a frame and stop once a video ends. I'm using a video component. I just can't figure it out. Is this possible with html5/canvas?

Views

168

Likes

translate

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 1 Correct Answer

Adobe Community Professional , Apr 22, 2021 Apr 22, 2021
if your component's instance name is videoPlayer:   this.stop();var video;var tl = this;function checkInitF() {if (video) {video.addEventListener("ended", function(){// video ended. do whatever. eg,tl.gotoAndStop(wherever)});} else {video = $("#videoPlayer")[0];setTimeout(checkInitF, 100);}}checkInitF();

Likes

translate

Translate

Translate
Adobe Community Professional ,
Apr 22, 2021 Apr 22, 2021

Copy link to clipboard

Copied

if your component's instance name is videoPlayer:

 

this.stop();
var video;
var tl = this;
function checkInitF() {
if (video) {
video.addEventListener("ended", function(){
// video ended. do whatever. eg,
tl.gotoAndStop(wherever)
});
} else {
video = $("#videoPlayer")[0];
setTimeout(checkInitF, 100);
}
}
checkInitF();

Likes

translate

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
Explorer ,
Apr 23, 2021 Apr 23, 2021

Copy link to clipboard

Copied

I have simplified this to understand faster. At launch I want them to see a video. i know they must press the play button on the video player skin to start the video. Once the video is finished, go to frame 2 and stop (which is really frame 3 on the timeline).

 

ui.jpg

Here I've put the ode on frame 0 (frame 1), where the video component is. I just want it to stop at frame 2 when the video is completed.

 

 

components2.jpgcomponents.jpg

So I tried using your code. Since my movie clip instance is named "scene1_mc", do I put that here?


this.stop();
var video;
var tl = this;
function checkInitF() {
if (video) {
video.addEventListener("ended", function(){
// video ended. do whatever. eg,
tl.gotoAndStop(2)
});
} else {
video = $("#scene1_mc")[0];
setTimeout(checkInitF, 100);
}
}
checkInitF();

Likes

translate

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
Adobe Community Professional ,
Apr 23, 2021 Apr 23, 2021

Copy link to clipboard

Copied

no.  that's the instance name of your video component.  ie, click to select it and check the properties panel for its instance name.  use that in

 

video = $("#videoPlayer")[0];

Likes

translate

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
Explorer ,
Apr 23, 2021 Apr 23, 2021

Copy link to clipboard

Copied

When I look at the properties panel, I see it is named "Video". Is that correct?

properties.jpg

 

 

 

 

Likes

translate

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
Explorer ,
Apr 23, 2021 Apr 23, 2021

Copy link to clipboard

Copied

I gave it a unique name "mcVideo", but still won't work. Does the code need to be on all frames? Or just the first one?

Likes

translate

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
Adobe Community Professional ,
Apr 23, 2021 Apr 23, 2021

Copy link to clipboard

Copied

no, Video not the instance name.  that's the symbol (in your library) name.

 

your screenshot shows the instance name is scene1_mc (which is an unwise name, but it's allowable).

 

i don't see mcVideo anywhere, but if you changed scene1_mc to mcVideo (a better name), then you would use:

 

video = $("#mcVideo")[0];

 

and that code just goes in frame 0 where your video component is instantiated.

Likes

translate

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
Explorer ,
Apr 23, 2021 Apr 23, 2021

Copy link to clipboard

Copied

instance_name.jpg

Yes, I have the instance name "scene1_mc". I have the symbol properties named "mcVideo". Still won't work though.

Likes

translate

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
Explorer ,
Apr 23, 2021 Apr 23, 2021

Copy link to clipboard

Copied

I added a semi colon after goto and stop at 2 line of code. Still no luck.

 

 

this.stop();
var video;
var tl = this;
function checkInitF() {
if (video) {
video.addEventListener("ended", function(){
// video ended. do whatever. eg,
tl.gotoAndStop(2);
});
} else {


video = $("mcVideo")[0];
setTimeout(checkInitF, 100);
}
}
checkInitF();

Likes

translate

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
Explorer ,
Apr 23, 2021 Apr 23, 2021

Copy link to clipboard

Copied

I zipped it here if you can take a look, I would be forever grateful.
https://app.box.com/s/295mhjy6khwt7xvcu2zig9f6s4020c1n

Likes

translate

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