Automatically go to next frame after playing video. HTML5 canvas

[renanmd]

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.

[kglad]

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

[renanmd]

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 · Accepted solution]

$("#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.

[ClayUUID]

For such a trivial application, there's not even any reason to use jQuery other than saving a few characters of typing. The code could just as well be this:

video = document.getElementById("videoPlayer");

Your check init function is strangely coded. It sets the value of "video", then checks it on the next call to the function instead of immediately. I'd think something like this would make more sense:

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

[kglad]

jquery's already loaded so i can't see any reason to not use it.