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

Question

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 undefinedstep1 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 · Accepted Answer

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"!

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

Dietmar0D45 · Answer

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;
	}
}

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded