Uncaught TypeError $(...)[0] is undefined when playing mp4

[Dietmar0D45]

Good morning!

I work with Adobe Animate CC 23 and just want to play a video with my own buttons. Some years ago I already did it but now my code always gives errors. My project will be published as html5 canvas. This time I want to keep my project simple without mouseover or mouseout. 

When my play Button is clicked function playVideo will be called and produces the error 

Uncaught TypeError $(...)[0] is undefined

step1 is the instance name of my video. I do not have any idea what is wrong with my code.

Any idea would be appreciated. Thank's in advance.

$("#dom_overlay_container").on("click","#PLAYBUTTONout",playVideo.bind(this));
$("#dom_overlay_container").on("click","#PLAYBUTTONpressed",videoPause.bind(this));
$("#dom_overlay_container").on("click","#STOPBUTTONout",videoEnde.bind(this));


function playVideo(evt)
{
	$("#PLAYBUTTONout")[0].style.display = "none";
	$("#PLAYBUTTONpressed")[0].style.display = "block";
	$("#step1")[0].style.display = "block";
	$("#step1")[0].play();
	$("#step1")[0].addEventListener("ended",videoEnde,false);
}

[Dietmar0D45]

I found in the web an example fla-file how to toggle playing a video on/off. It's just a video and a button both from the component window. But nothing is displayed. Is it possible that my Adobe Animate is a version of Adobe Frozen?

Here's the code from the fla-file: 

$("#video1")[0].play();

var isPlaying = true;

this.btn.addEventListener("click", toggleVideo.bind(this));
function toggleVideo(){
	if (isPlaying) {
		$("#video1")[0].pause();
		isPlaying = false;
	} else {
		$("#video1")[0].play();
		isPlaying = true;
	}
}

[kglad]

what's adobe frozen?

[Dietmar0D45]

A not moving Animate ;-))

[kglad]

not enough info.

do you mean your animate is frozen, ie not working?

do you mean there is some adobe app called Animate Frozen?

do you mean something else?

explain clearly. you are not charged by the word for posting here and while brevity, and avoiding unneeded verbiage is appreciated, please give enough info to make sense of what you're posting.

[Dietmar0D45]

The "Adobe Frozen" was just playing with words. Adobe ANIMATE (= moving things) and Adobe FROZEN (= not moving anything).

The problem: when testing script 1 I just get the error message in the developers console of the brower

"Uncaught TypeError $(...)[0] is undefined" and the dollar sign has been marked. Commenting the first line out

// $("#step1")[0].style.display = "block";

 I get the same error on the second line.

When testing script 2 I get a white browser window and with no errors.

Possibly it's my fault but I have no idea what is wrong with this command. As I have to control the video with own buttons I cannot use the build-in controls of the player. Is there any other way to start a video manually?

And sorry for the misunderstanding of "Adobe FROZEN"!

[Dietmar0D45 · Accepted solution]

I got it. Just delete everything and recreate the complete frame. My script works fine:

stage.enableMouseOver();
var root = this;

this.mc_gotoHome.on("mouseover",function(e) {this.cursor="pointer";});
this.mc_gotoHome.addEventListener("click", fl_gotoHome.bind(this));
this.btn_videoPlayOFF.on("mouseover",function(e) {this.cursor="pointer";});
this.btn_videoPlayOFF.addEventListener("click", playVideo.bind(this));
this.btn_videoPlayON.on("mouseover",function(e) {this.cursor="pointer";});
this.btn_videoPlayON.addEventListener("click", pauseVideo.bind(this));

function fl_gotoHome()
{
	this.gotoAndStop(4);
}
function playVideo(evt)
{
	root.btn_videoPlayOFF.visible = false;
	root.btn_videoPlayON.visible = true;
	$("#FWA")[0].style.display = "block";
	$("#FWA")[0].play();
	$("#FWA")[0].addEventListener("ended",videoEnde,false);
}
function pauseVideo(evt)
{
	root.btn_videoPlayOFF.visible = true;
	root.btn_videoPlayON.visible = false;
	$("#FWA")[0].pause();
}
function videoEnde(evt)
{
	$("#FWA")[0].pause();
	$("#FWA")[0].currentTime = 0;
	root.gotoAndStop(4);
}
this.stop();

[kglad]

glad it's solved.