Highlighted

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

Engaged ,
Oct 07, 2019

Copy link to clipboard

Copied

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.

 

clipboard_image_0.png

 

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:

clipboard_image_1.png


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

Thanks! 

 

Views

537

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Engaged ,
Oct 07, 2019

Copy link to clipboard

Copied

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.

 

clipboard_image_0.png

 

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:

clipboard_image_1.png


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

Thanks! 

 

Views

538

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 07, 2019 0
Adobe Community Professional ,
Oct 07, 2019

Copy link to clipboard

Copied

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

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2019 0
Engaged ,
Oct 07, 2019

Copy link to clipboard

Copied

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

clipboard_image_0.png

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





Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2019 0
Adobe Community Professional ,
Oct 07, 2019

Copy link to clipboard

Copied

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...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2019 1
Engaged ,
Oct 08, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2019 0
Adobe Community Professional ,
Oct 07, 2019

Copy link to clipboard

Copied

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

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2019 0
Engaged ,
Oct 08, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2019 0
Explorer ,
Oct 11, 2019

Copy link to clipboard

Copied

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

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 11, 2019 1