Skip to main content
R
renanmd
Known Participant
August 10, 2021
Answered

Automatically go to next frame after playing video. HTML5 canvas

  • August 10, 2021
  • 1 reply
  • 1295 views

I want to play a video through the video component and after that video has finished I want to automatically go to the next frame and stop. But I don't know how to accheive this.

I can place the video component on the stage and auto-play but to go to the next frame I have to place another button on the stage to go to the next frame.

All of this is using html5 canvas.

This topic has been closed for replies.
Correct answer kglad

$("#videoPlayer")[0]; is the jquery reference to your video component.  you need to learn a little jquery (a javascript library) and javascript to understand it, but the hash precedes the javascript id (which is the same as the animate instance name) and the dollar sign is an alias for a jquery object.  animate uses the jquery library to add components to canvas projects (so that library is automatically loaded when you add a component to your project.

 

the setTimeout() calls the first parameter function (checkIniF) every 2nd parameter (100) milliseconds.  this is because the component is not added to the canvas immediately, but takes some time.  checkInitF repeatedly checks if $("#videoPlayer")[0] is defined. while it is not, it checks again in 1/10 second.  once it is defined, a listener for the video's end is added.

1 reply

kglad
Community Expert
kgladCommunity Expert
Community Expert
August 11, 2021

assign your video player an instance name (eg, videoPlayer).  you can then use

 

var video;

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

    R
    renanmdAuthor
    Known Participant
    August 11, 2021

    Thank you again @kglad . Since I'm actually trying to learn and not just copy and paste. Would you mind explaining this part to me? If possible.

    video = $("#videoPlayer")[0];
    setTimeout(checkInitF, 100);

    kglad
    Community Expert
    kgladCommunity ExpertCorrect answer
    Community Expert
    August 11, 2021

    $("#videoPlayer")[0]; is the jquery reference to your video component.  you need to learn a little jquery (a javascript library) and javascript to understand it, but the hash precedes the javascript id (which is the same as the animate instance name) and the dollar sign is an alias for a jquery object.  animate uses the jquery library to add components to canvas projects (so that library is automatically loaded when you add a component to your project.

     

    the setTimeout() calls the first parameter function (checkIniF) every 2nd parameter (100) milliseconds.  this is because the component is not added to the canvas immediately, but takes some time.  checkInitF repeatedly checks if $("#videoPlayer")[0] is defined. while it is not, it checks again in 1/10 second.  once it is defined, a listener for the video's end is added.

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