zshall
commented
2 months ago 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.
hatsch
geerew
mihar-22
Daedalus11069
Zibbp
plcdnl
Current Behavior:
When embedding a
<media-player>in Svelte withvolumeset to0andmutedset totrue, the player starts at full volume.If you
bind:this={player}and programatically setplayer.mutedandplayer.volumeit works.Expected Behavior:
The player should start muted.
Steps To Reproduce:
Reproduction Link: StackBlitz example
Environment:
Example:
Anything Else?