After playing HTML5 canvas video component timeline navigation buttons stop working

[johnl34897798]

Hi All,

Hoping for some help. I have an HTML5 Canvas with a menu that navigates to more information then has the option to play a video. When I test the file everything works fine until I add the video component. After the video component plays in the browser (tested on Safari and Chrome) all but 1 of the buttons stop working. I changed the first button to a movie clip and that did not fix anything. Any help would be appreciated. Below is a link to the project. Thanks!

Dropbox - ForumExample

[JoãoCésar · Accepted solution]

Hi.

Besides of adding the video source (Assets/Clip_1.mp4), I gave the video an instance name of 'video0' and changed this

createjs.Video.stop();

to

this.video0.pause();

Please see if this is what you want.

Regards,

JC

[johnl34897798]

JC,

Unfortunately, this still doesn't fix the issue that the home screen movie poster 1 and movie clip1 buttons no longer work after the video plays.

Thanks,

John

[JoãoCésar]

This is odd. They continue to work here.

Take a look: ForumExample_v02.zip - Google Drive .

[johnl34897798]

This is weird. Your update works in my browser, but if I open the FLA in Animate and save it and publish it, it stops working. What version of Animate are you using if you don't mind me asking?

[johnl34897798]

After updating to Animate Version 18.0.1 (Build 115) your solution works. I didn't dig into the HTML but a quick look showed 104 lines of code including notes (older version of animate) to 114 lines for this version using the same FLAs, so something was missing.

Thanks for all your help!

[JoãoCésar]

You're welcome!

[ClayUUID]

JoãoCésar  wrote
this.video0.stop();

This doesn't do anything. When you name a video component, its name resolves to the HTML5 video element that it creates, which doesn't support a stop() method. The method for stopping an HTML5 media element is pause().

But there's no reason to manually stop this video anyway, because it automatically stops playback when the component leaves the stage.

[JoãoCésar]

Sorry about that. Fixed there.

[ClayUUID]

I can't think of any reason why anything a component does would kill your buttons. Have you monitored the developer console for error messages?

[johnl34897798]

I'm not getting any errors and the only error I got in the Chrome debugger was the javascript call to stop the video which I removed because it isn't working anyway.

The reason I know that it has something to do with the video component is that if I removed it, everything works fine.

[ClayUUID]

Well I'm confused. You say all but one of the buttons stops working... but in the example you provided, only one button works ever. There's only code in the first frame for a single button.

Although I see you have nothing in place to prevent re-adding your button event listeners, so they just keep getting added over and over again as the user cycles through the interface. You can see what this is doing if you insert alert or console.log statements in your event handlers.

[johnl34897798]

Sorry I should have clarified that only the movie poster 1, back button, and movie clip 1 buttons are currently coded. After the video plays on the back button on screen 2 works.