Skip to main content
J
jakew5301493
Participant
May 18, 2020
Question

HTML5 Canvas Video Events Not Working

  • May 18, 2020
  • 1 reply
  • 559 views

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!

This topic has been closed for replies.

1 reply

C
ClayUUID
Legend
May 19, 2020

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.

J
jakew5301493Author
Participant
May 19, 2020

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

 

Firefly Community Gallery
Adobe Firefly

Remix with Firefly Community Gallery

Thousands of free creations to fall in love with and remix in Firefly.

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