Skip to main content
C
charlieb69810333
Inspiring
February 24, 2021
Answered

Load a Button after Video Ends in Canvas

  • February 24, 2021
  • 1 reply
  • 738 views

Hello,
I have read though several posts relating this this topic, but can not get a button to load after the end of a video.

Objective:

To detect the end of a MP4 video imported into the fist frame of timeline and once the end of video is reached a button displays (or advances timeline one frame to where a button resides so user can be linked to another page).

Thanks in advance.
Charlie


This topic has been closed for replies.
Correct answer kglad

then the video's not imported "into the first frame of the timeline".  it's imported using the video component.

 

so, if your component instance name is videoPlayer, you can use:

 

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

 

 

 

1 reply

kglad
Community Expert
kgladCommunity Expert
Community Expert
February 25, 2021

if the video's on a timeline, start a timer loop (eg, ticker if html5, enterframe if as3) and repeatedly check if the last frame has played.  if it has, stop the loop and do what with that 

 

or even easier, just put a this.stop() on the last frame of the video or one frame beyond the video (if that's what you want) and put your button there.

    C
    charlieb69810333Author
    Inspiring
    February 25, 2021

    Hi Kglad.

    Thanks for the kind reply.

    Those options make a lot of sense and certainly valid if the video is set across the root timeine. I'll further clarrify my situation:

    I had to import the video using the Video Component and that places the entire video  (1:59 in length) in the first keyframe as a self-contained video component. I'm under the impression that I need to do it this way to make it HTML5 Canvas compatible. (See image to viw how it is setup)

    Any thoughts or maybe I'm misundertanting your answer. Or, my Animate skills are far where they shoud be. : )

    Thanks,
    Charlie

    kglad
    Community Expert
    kgladCommunity ExpertCorrect answer
    Community Expert
    February 25, 2021

    then the video's not imported "into the first frame of the timeline".  it's imported using the video component.

     

    so, if your component instance name is videoPlayer, you can use:

     

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

     

     

     

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices