Autoplay isn't working

[Seekeer]

Autoplay on Vime isn't working. But in simple

<video controls height="auto" autoplay  #videoElement >
  <source src="{{videoURL}}" type="video/mp4"/>
</video>

<vm-player autoplay muted *ngIf="videoURL" (vmPlaybackEnded)="videoEnded()" (vmPlaybackReady)="ready()" #player >
  <vm-video cross-origin="true" >
    <source src="{{videoURL}}" type="video/mp4" />
  </vm-video>
...
</vm-player>

On the same page. After navigation first video is autostarted, other one - not. If Im trying to start it manualy by

    if(this.getVideoElement())
    this.getVideoElement().play();

I got:

Unhandled Promise rejection: play() failed because the user didn't interact with the document first.

But why this message isn't shown for the first element and browser allow it to autostart?

[Pettor]

Have the same issue. canAutoplay() and canAutoplayMuted() both return true but neither using the autoplay prop on vm-player or trying to call the play() method works.

[dungle-scrubs]

Any ideas on this? With the same settings on a <video> tag it will autoplay, but not using Vime. I've also checked and verified that muted is true (I'm using React by the way).

[errand]

I was able to bypass this by playing manually

Remember that there are several rules why browsers wouldn't autoplay https://developer.chrome.com/blog/autoplay/#new-behaviors

So if user had watched the videos on the domain, the autoplay with sound will probaply work. In other case you could try something like this

if (!isPlaying) {
  this.player.volume = 0
  setTimeout(() => {
    this.player.play();
    this.player.volume = 50;
  }, 1500)
}

[dungle-scrubs]

@errand thanks, this helped me figure it out. I don't need to adjust the volume, only a minimum of 300ms timeout delay before it's allowed to play.

[zshall]

I've noticed this delay myself; my website is manually whitelisted for autoplay permissions and I'm playing through Kiosk mode in Edge which should allow for autoplay without user input.

In Svelte I've gotten everything to work with the following:

<script lang="ts">
...
    let player: Player;
    let initialPlayTimeout: any;

    onMount(() => {
        initialPlayTimeout = setTimeout(() => {
            player.play();
        }, 300);
    });

    onDestroy(() => {
        if (initialPlayTimeout) {
            clearTimeout(initialPlayTimeout);
        }
    });
...
</script>

<Player
        controls
        muted={$state.isMuting}
        volume={$state.volume}
        bind:this={player}>
        <Audio>
            <source data-src={src} type={type} />
        </Audio>
</Player>

This suffices for my purposes, however I don't understand what's causing the delay to be necessary, whether it's the initialization time of the Player component or a limitation imposed by the browser.

[giacomoalonzi]

I've noticed this delay myself; my website is manually whitelisted for autoplay permissions and I'm playing through Kiosk mode in Edge which should allow for autoplay without user input.

In Svelte I've gotten everything to work with the following:

<script lang="ts">
...
    let player: Player;
    let initialPlayTimeout: any;

    onMount(() => {
        initialPlayTimeout = setTimeout(() => {
            player.play();
        }, 300);
    });

    onDestroy(() => {
        if (initialPlayTimeout) {
            clearTimeout(initialPlayTimeout);
        }
    });
...
</script>

<Player
        controls
        muted={$state.isMuting}
        volume={$state.volume}
        bind:this={player}>
        <Audio>
            <source data-src={src} type={type} />
        </Audio>
</Player>

This suffices for my purposes, however I don't understand what's causing the delay to be necessary, whether it's the initialization time of the Player component or a limitation imposed by the browser.

I had the same problem with Chrome, but I managed to solve it with this React trick. Thanks!

const ref = useRef<HTMLVmPlayerElement>(null)
  useEffect(() => {
    const initialPlayTimeout = setTimeout(() => {
      ref?.current?.play()
    }, 300)
    return () => {
      clearTimeout(initialPlayTimeout)
    }
  })