Skip to main content
johnl34897798
Participating Frequently
March 7, 2018
Answered

After playing HTML5 canvas video component timeline navigation buttons stop working

  • March 7, 2018
  • 3 replies
  • 1319 views

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

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

    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

    3 replies

    Brainiac
    March 7, 2018

    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
    Participating Frequently
    March 8, 2018

    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.

    Brainiac
    March 7, 2018

    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
    Participating Frequently
    March 7, 2018

    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.

    JoãoCésar17023019
    JoãoCésar17023019Correct answer
    Community Expert
    March 7, 2018

    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
    Participating Frequently
    March 7, 2018

    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ésar17023019
    Community Expert
    March 7, 2018

    This is odd. They continue to work here.

    Take a look: ForumExample_v02.zip - Google Drive .