3 Video Components, in their own frames, audio won't stop when frame is exited? HTML5 Canvas Firefox

[jeffery wright]

This works fine in the latest Chrome, but the latest Firefox = each video keeps playing even though I moved to another frame where the Video Component is not contained.

When a button sends the MovieClip to "SP", it's Video Component plays... if while it is playing, the user chooses to see "SPG", that clip will play, but the audio from the "SP" VC keeps playing!

And if the user then wants to see "SMP", then the audio from the previous two VC's continue to play atop the "SMP" VC.

Can anyone explain that? Is it a browser bug?

Also works fine in Edge, Opera and Brave (Ignores Autoplay), but IE gives me this error:

Anyone have an idea how to make the videos stop playing once they are no longer visible on the stage in FireFox?

Thanks! 

[resdesign]

Explicitely pause the video when you choose another one.

you could add a variable to check if it is playing and then pause it.

$("#SP")[0].pause();

[jeffery wright]

It's sort of working, but making the nav functions oddly unpredictable... It's fine toggling between SP and SPG, but a button in the parent sends the clip to SMP, and accounting for that makes the whole thing unstable.

Since this new ridiculous forum will not let me format my replies I am going to add this then edit it so I can format for easier reading and elaborate.

I am instead trying to make this part of the main reset function:

function Reset_A() {
root.Video_Display.gotoAndStop(0);
$("#v_SP")[0].pause();
$("#v_SPG")[0].pause();
$("#v_SMP")[0].pause();
};

The # seems to be the instance name I gave each VC... but they are in a Movie Clip (Video_Display), is there a way to make a path from the parent to the VC's inside the MC?

Right now the MC is no longer jumping to the frames:
Uncaught TypeError: Cannot read property 'pause' of undefined

Do I need to target the VC's in the MC via some kind of path? 
Thanks!

[resdesign]

Here is an example. Since you have only 3 videos. I used the same one but you can see and hear that it stops. https://documentcloud.adobe.com/link/track?uri=urn%3Aaaid%3Ascds%3AUS%3A57bf1e81-7a57-43ee-b67a-06ae...

[jeffery wright]

thanks for this, I'm trying it out now!

[resdesign]

You could use something like this:

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

[jeffery wright]

Right out of the box, no code modified, I'm getting this error: Uncaught TypeError: Cannot read property 'play' of undefined referencing: $("#video1")[0].play(); weird, again because it is clearly defined.

[DOM]

Animate is creating a new insance of the video element in the HTML page each time you jump to a specified frame that contains your video component. The auido overlap is because the videos still exist on the HTML page and are therefore still playing.

The reason that you are not experiencing the same functionality in Chrome is due to their video autoplay policy. For more info see: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

You also mentioned that you receive a TypeError: Undefined message. This is probably because you are referencing symbols that you don't have access to yet in your timeline. In other words, you may have symbols that aren't on the same frame where your script is located (Frame 1 for example).

Take note that with your current design flow, you will be creating duplicate video tags each time you jump to a new frame. Therefore, you will need to remove the old video tags in the HTML page prior to advancing to a new frame using the jQuery remove() method.

Instead of having 3 video components, I suggest creating one video component and dynamically change the your video source each time you click a different button.

Here's a short example on how to implement one of the buttons:

var root = this;
root.btn1.addEventListener("mousedown", mouseDownHandler);

function mouseDownHandler(event){
	
	//The name of the video component in this example is  myVideoPlayer
    //The video's source attribute is updated to specify where my video is located
	$("#myVideoPlayer").attr("src", "videos/video_1.mp4");
}