Audio not stoping in the player

[santoshgistto]

Looks like audio not stopping when we go to another tab in the browser
Steps:

1. play video here https://remotion-poc.vercel.app/
2. Go to next tab or open the tab

[JonnyBurger]

I can confirm the bug. Thanks for filing and hope to find a fix it!

[CruuzAzul]

I can take this bug 🥳 I think we can even make the whole player pause when we change tabs wyt ?
I'll make a first PR to do this and we'll see if it's the behaviour we want 😊

[JonnyBurger]

Would be very happy if you investigated this @CruuzAzul!

Seems like Chrome is pausing requestAnimationFrame() when the tab is not focused.
Pausing the entire video is also a nice feature, but if we can avoid it, we should first focus on this bug specifically.

[CruuzAzul]

We should be able to do something in the player package using the visibilitychange event listener, I think this is usually the event that is used to deal with these tab change problems ! When listening to this event we should be able to either pause the player or mute it 😊

I'll take a look at this 😉

[JonnyBurger]

Just to clear up any confusion: The bug is not about pausing the whole video!

The bug is that when the website is visited, the video starts playing, and when you tab to another site, then the audio keeps playing, even when the Remotion video finishes!

So to pause the whole video would only be a workaround if there is no better way to ensure the audio finishes if the audio finishes.

[CruuzAzul]

Oh ok i see, i hadn't understood the problem like that, indeed thanks for the clarification ! 😅 I'll look into it 😊

[santoshgistto]

I can confirm the bug. Thanks for filing and hope to find a fix it!

Thanks for making this awesome package

[santoshgistto]

@JonnyBurger another behavior its not updating the audio also
please check the above url i have updated the sample app

[CruuzAzul]

Is this related to the same thing ?

[santoshgistto]

mostly audio is not getting replaced

[santoshgistto]

@CruuzAzul you reproduce here https://remotion-poc.vercel.app/

[CruuzAzul]

@santoshgistto yes thanks ! I wanted to know if this problem was related to the first problem that appears when changing tabs in the browser 🤔

[CruuzAzul]

@JonnyBurger for the first issue by searching on the documentation it seems that is a feature of setAnimationFrame at work... Most of the solutions people propose to avoid the kind of problem we have seem to be to use the visibilityChange, I don't know if anyone has another idea

requestAnimationFrame() calls are paused in most browsers when running in background tabs or hidden <iframe>s in order to improve performance and battery life.
https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

[santoshgistto]

@CruuzAzul / @JonnyBurger Here is sample repo https://github.com/santoshgistto/remotion-poc

[santoshgistto]

@santoshgistto yes thanks ! I wanted to know if this problem was related to the first problem that appears when changing tabs in the browser 🤔

i believe its related to each other

[JonnyBurger]

Those are two different bugs. The second one I moved to #2033

[santoshgistto]

Thanks @JonnyBurger

[JonnyBurger]

@CruuzAzul The visibilitychange thing seems also like it is the way to go.
I'm not sure how to proceed once we figure out that the tab is in the background.

Do we switch to setTimeout()? Do we calculate when to stop the audio?
If this is all funky and we cannot rely on the browser to reliably end the audio, then maybe we should make a setting to stop the video entirely and document this behavior.

[CruuzAzul]

@JonnyBurger I don't know... can we really have cases where we want the video to keep running in the background when we change tabs ? Maybe it makes sense to stop the video on the player when you switch tabs rather than calculating the time left on the audio and stopping it manually 🤔

[JonnyBurger]

@CruuzAzul I do think it makes sense to keep the audio running in the background yes!
This is also the behavior on YouTube for example.

I am going to make a PR myself if you don't mind where I will test to use setTimeout() instead of requestAnimationFrame in the background and see if that fixes it!