Vimeo video doesn't autoplay

[bjarnef]

Current Behavior:

I have something similar to this to autoplay a Vimeo video.

<script lang="ts" setup>
...

const onProviderChange = (event: MediaProviderChangeEvent) => {
  const provider = event.detail;
  // We can configure provider's here.
  if (isHLSProvider(provider)) {
    provider.config = {};
  }
};

// We can listen for the `can-play` event to be notified when the player is ready, but not used at the moment
const onCanPlay = (event: MediaCanPlayEvent) => {
};

const src = computed(() => embed.value.src ?? '');
const autoplay = computed(() => settings.value.config?.autoplay ?? false);
const muted = computed(() => autoplay.value ?? settings.value.config?.muted ?? false);
</script>

<template>
<media-player
    class="player"
    :src="src"
    :autoplay="autoplay"
    :muted="muted"
    crossorigin
    playsinline
    @provider-change="onProviderChange"
    @can-play="onCanPlay">
    <media-provider>
      <media-poster
        class="vds-poster"
        alt="" />
    </media-provider>
    <!-- Layouts -->
    <media-audio-layout />
    <media-video-layout :translations="translations" />
  </media-player>
</template>

Previously it only showed the poster image, but after added muted property it now load the video, but it doesn't start playing the video.

Looking at the embed iframe it doesn't seem to include &autoplay=1&muted=1 in Vimeo request.

In console I get errors like these:

Expected Behavior:

Steps To Reproduce:

Add player using Vimeo and autoplay.

Reproduction Link: How to create a repro?

Environment:

Anything Else?

[bjarnef]

I had a look at this: #1416

I workaround was to use this:

// We can listen for the `can-play` event to be notified when the player is ready, but not used at the moment
const onCanPlay = (event: MediaCanPlayEvent) => {
  // Workaround to start muted autoplay as e.g. Chrome doesn't allow autoplay with sound: https://developer.chrome.com/blog/autoplay/
  if (autoplay.value === true) {
    setTimeout(() => {
      $player.value!.muted = true;
    }, 0);
  }
};