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

[sholderman1]

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?

[kglad · Accepted solution]

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();

[KansasSteve]

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

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.

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();

[kglad]

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];

[KansasSteve]

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

[KansasSteve]

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?

[kglad]

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.

[KansasSteve]

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

[KansasSteve]

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();

[KansasSteve]

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