Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<media-player> doesn't respect initial volume and muted props #1416

Open
zshall opened this issue Aug 30, 2024 · 11 comments
Open

<media-player> doesn't respect initial volume and muted props #1416

zshall opened this issue Aug 30, 2024 · 11 comments
Labels
bug Something isn't working

Comments

@zshall
Copy link

zshall commented Aug 30, 2024

Current Behavior:

When embedding a <media-player> in Svelte with volume set to 0 and muted set to true, the player starts at full volume.

If you bind:this={player} and programatically set player.muted and player.volume it works.

Expected Behavior:

The player should start muted.

Steps To Reproduce:

    <media-player
        class="w-full"
        src={props.src}
        playsInline
        bind:this={player}
        muted={true}
        >
        <media-provider></media-provider>
    </media-player>

Reproduction Link: StackBlitz example

Environment:

Example:

  • Framework: Svelte
  • Meta Framework: SvelteKit
  • Node: 20.0.0
  • OS: Windows@11
  • Browser: Chrome@128

Anything Else?

image

@zshall zshall added the bug Something isn't working label Aug 30, 2024
@zshall
Copy link
Author

zshall commented Aug 30, 2024

In further testing I've noticed that programmatically setting the volume is also a bit off if you do it right around the time you load the player. If I have a method that's called onMount() or onCanPlay() such as this:

function onCanPlay() {
        player.volume = 0.2;
        player.muted = true;
        
        player.play();
    }

It doesn't work. The player is unmuted at full volume when it loads.

Same thing if I reverse the order:

function onCanPlay() {
        player.play();

        player.volume = 0.2;
        player.muted = true;
    }

Player is unmuted at full volume.

A workaround

The only workarounds I've found are to set a timeout for 0 ms that calls this code and then it works:

function onCanPlay() {
        player.play();

        setTimeout(() => {
            if (player) {
                player.volume = 0.2;
                player.muted = true; // works with a 0ms timeout
            }
        }, 0);
    }

This isn't a great solution; is there a preferred way to interact with volume programmatically? My use case is that I have a $store that holds volume and muting info for a number of different video and audio players and I need them to all sync up with the same volume variables, therefore if the program starts muted I need the player to also start muted.

@zshall
Copy link
Author

zshall commented Aug 30, 2024

Tested and you can't use a remote object to do it either right on launch.

setTimeout(() => {
            remote.changeVolume(0.2);
            remote.mute(true); // works
        }, 0);

This also only works if you setTimeout().

@hatsch
Copy link

hatsch commented Sep 6, 2024

this bug is not present in v1.11.30-next
first version affected is v1.12.0-next

i am using this in my nuxt app to only have 1 player unmuted

@geerew
Copy link

geerew commented Sep 11, 2024

The same is happening for playbackRate and volume

@mihar-22
Copy link
Member

Thanks for reporting! This is a hydration bug with Svelte 4 as mentioned in the docs. You can either upgrade to Svelte 5 or you can mount the player client-side only by dynamically importing it.

👉 Section in docs mentioning this issue.

@zshall
Copy link
Author

zshall commented Sep 15, 2024

Cool I’ll try this today, thanks!

@hatsch
Copy link

hatsch commented Sep 16, 2024

@mihar-22 as mentioned earlier, this bug is also affecting nuxt/vuejs.
i have ssr disabled in my app. so i doubt it's solely an issue with hydration

version v1.11.30-next is not affected.

@mihar-22
Copy link
Member

I just tested it and it works as expected, make sure you're setting volume between 0 and 1, for 30% it'd be volume="0.3".

@Daedalus11069
Copy link

Daedalus11069 commented Sep 17, 2024

@mihar-22

I just tested it and it works as expected, make sure you're setting volume between 0 and 1, for 30% it'd be volume="0.3".

Here is a stackblitz reproducing the bug: https://stackblitz.com/edit/vidstack-examples-qufbsu?file=src%2FPlayer.vue

The player's ref of volume is set to 0.1 by default. The volume slider shows this below, but the actual player volume is at 1.

This bug is still present; can you please share how you have yours working?

@Zibbp
Copy link

Zibbp commented Sep 24, 2024

I can also reproduce this using the javascript/cdn import: https://stackblitz.com/edit/stackblitz-starters-jdj5p2?file=index.html
Changing the import URL to use @v1.11.30 works as expected, so some issue in newer releases.

@plcdnl
Copy link

plcdnl commented Oct 19, 2024

same issue on nuxt. Everything works fine with 1.11.30. Thank you for the workaround. @mihar-22, really sorry for the ping, but i think is necessary to re-open the issue

@mihar-22 mihar-22 reopened this Oct 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

7 participants