In the video tag, the muted binding does not work 100%

[marius-jopen]

Describe the bug

I have an accordeon which I can open and close. When it is open, a slider with a video is visible. The video is set to autoplay and should be muted.

When I open the accordeon the first time, the video is playing and muted. When I close it and reopen it, the sound is playing.

Here is a link: https://sveltekit-prismic-theme-dev.netlify.app/projects

––––––––

I know that this has been mentioned here before and I went through all the reports here. In one report it says that I should use the TICK event. But I do not really understand of how this should work.

––––––––

Thank you! I love Svelte!

Reproduction

Here is the code for the slide-item which contains the video:

<script>
    // Get data from parent Component
    export let item
    export let height // Shared height

    // Check if it is a vimeo link or a file from prismic
    let videoUrl = item.slider_video.url
    let videoVimeo = item.slider_video_link[0]

    if(videoVimeo) {
        videoUrl = item.slider_video_link[0].text
    }

   let muted = true
</script>

<div class="{height}">
    {#if item.slider_image.url}
        <img src="{item.slider_image.Big.url}" alt="{item.slider_image.alt}" class="{height} w-full object-cover">
    {/if}

    {#if videoUrl || videoVimeo}
        <!-- svelte-ignore a11y-media-has-caption -->
        <video class="{height} w-full object-cover" playsinline poster="{item.slider_video_poster.Big.url}" autoplay loop bind:muted>
            <source src={videoUrl} type="video/mp4" />
            Your browser does not support the video tag.
        </video>
    {/if}
</div>
````

### Logs

_No response_

### System Info

```shell
System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-3740QM CPU @ 2.70GHz
    Memory: 5.99 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 16.13.2 - /usr/local/bin/node
    npm: 8.4.1 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 98.1.35.103
    Safari: 15.3
  npmPackages:
    svelte: ^3.46.4 => 3.46.4
```


### Severity

annoyance

[IharKrasnik]

the same problem!

[ghostdevv]

@IharKrasnik Do you have a minimal reproduction? The link in the OP's message no longer works

[johannesmutter]

Same issue. As a temporary fix I'm using the on:loadmetadata event to set the volume to 0.

<script>
  let videos = ["1.mp4","2.mp4"];
  let videoElements = [];
</script>

{#each videos as src, index}
  <video 
    bind:this={ videoElements[index] }
    on:loadedmetadata={()=>{ videoElements[index].volume = 0; }}
    preload="none" 
    autoplay 
    loop 
    muted 
    playsinline 
    controlsList="nodownload"
  >
    <source src="{src}" type="video/mp4">
    Your browser does not support the video tag.
  </video>
{/each}

I also tried to use intersection observer to pause and play the video, but it will then randomly play the video with sound again.

Versions: "svelte": "4.0.0", "@sveltejs/kit": "1.20.4",

[marius-jopen]

I found a hacky solution which works quite well:

<script>
	import { onMount } from 'svelte';

	export let paused;
	export let src;
	export let poster = '';
	export let autoplay = false;
	export let muted = false;
	export let loop = false;
	export let controls = false;
	export let time;
	export let duration = '';
	export let video;

	onMount(() => {
		if (autoplay == false) {
			paused = true;

			if (muted == false) {
				video.volume = 1;
			} else {
				video.volume = 0;
			}
		} else {
			paused = false;
			video.volume = 0;
		}
	});

	function videoMute() {
		if (muted == false) {
			video.volume = 1;
		} else {
			video.volume = 0;
		}
	}
</script>

<!-- svelte-ignore a11y-media-has-caption -->
<video
	class="w-full"
	bind:this={video}
	on:load={videoMute}
	bind:paused
	bind:duration
	bind:currentTime={time}
	{poster}
	{loop}
	{controls}
	playsinline
>
	<source {src} type="video/mp4" />
	Your browser does not support the video tag.
</video>

````