HTML5 Canvas Video Events Not Working

[jakew5301493]

I've been having a lot of trouble handling some simple video events with an HTML5 video element in the stage (instance name "video_1" in Animate).

I have a Main Menu button go to Frame 2 where there is an embedded video player. I want to create a function that will return to the Main Menu when the video finishes playing.

However nothing I'm trying is working:

_this.video_1.addEventListener('ended', videoEvent, false);
function videoEvent(e){
	console.log("video ended!");
}

I tried a lot of different ways to do this.. I can't seem to get anything to trigger

Even using the Code Wizard to create a basic function doesn't seem to ever trigger anything.

var _this = this;
_this.video_1.on('added', function() {
/*
Mute/Unmute the selected video.
*/
$('#video_1')[0].muted = true;
console.log("video muted");
}, _this, true);

Anyone have any pointers for me to get this to work? Thanks!

[ClayUUID]

You're confusing the video component and the video element. The video component is an Animate symbol on the timeline, that just handles automatically creating and destroying video elements. The actual video elmement is an HTML browser entity, accessed with document.getElementById(), or you could use $() since using any component automatically includes jQuery.

[jakew5301493]

Hey Clay thanks for the reply!

I actually did quite a few tests using getElementById("video_1") / ('video_1') and when I would do a console.log() for that element, I'd get a null or undefined return.

document.getElementById('video_1').addEventListener('ended',myHandler,false);
function myHandler(e) {
   console.log("video ended")
}

 With the above code... I get the errors in console:

Uncaught TypeError: Cannot read property 'on' of undefined
Uncaught TypeError: Cannot read property 'addEventListener' of null