Safari Video Not AutoPlaying when inside a Suspense

Hey everyone ! Not sure if this is intended to happen but it’s a bug. When you have a video html tag with:

<video autoplay playinsline muted><source src="" /></video>

<video autoplay playinsline muted><source src="" /></video>

It doesn’t render on Safari specifically when it’s inside a <Suspense>. If placed outside it renders automatically in Safari. Does anyone know why this happens? Seems like a weird bug.

8 Replies

Madaxen86•3mo ago

Videos have some weird behaviours. Try to put muted before autoplay.

CasacobraOP•3mo ago

Sorry just got back from work, will try this now and keep you updated! Thanks 😄 @Madaxen86 yeah unfortunately that didn't do anything 😦

Madaxen86•3mo ago

I've just tried this and it works in Chrome and Safari on my MacBook.

export default function Video() {
  return (
    <main>
      <Suspense>
        <video
          muted
          autoplay
          controls
          playsinline
        >
          <source
            src="https://cdn.pixabay.com/video/2023/10/19/185726-876210695_tiny.mp4"
            type="video/mp4"
          />
        </video>
      </Suspense>
    </main>
  );
}

export default function Video() {
  return (
    <main>
      <Suspense>
        <video
          muted
          autoplay
          controls
          playsinline
        >
          <source
            src="https://cdn.pixabay.com/video/2023/10/19/185726-876210695_tiny.mp4"
            type="video/mp4"
          />
        </video>
      </Suspense>
    </main>
  );
}

It's important that the response header of the video file sends the correct mime type.

CasacobraOP•3mo ago

Hey Max yeah the main concern is I don’t want controls to be set to true I need it without controls and safari policy or iOS policy is you can play a video automatically as long as it’s muted You'll notice if you remove the controls, it won't render in safari if inside the Suspense, then try it outside suspense without controls and it will render on safari

Madaxen86•3mo ago

Challenge accepted. I noticed that on client navigation the video does not autoplay on Safari and therefore does not load the video. So I added the ref.play() in onMount. Now it starts to play.

export default function Video() {
  let ref!: HTMLVideoElement;
  onMount(() => {
    //autoplay Safari on client nav
    ref.play();
  });
  return (
    <main>
      <Suspense>
        <video
          ref={ref}
          muted
          autoplay
          playsinline
        >
          <source
            src="https://cdn.pixabay.com/video/2023/10/19/185726-876210695_tiny.mp4"
            type="video/mp4"
          />
        </video>
      </Suspense>
    </main>
  );
}

export default function Video() {
  let ref!: HTMLVideoElement;
  onMount(() => {
    //autoplay Safari on client nav
    ref.play();
  });
  return (
    <main>
      <Suspense>
        <video
          ref={ref}
          muted
          autoplay
          playsinline
        >
          <source
            src="https://cdn.pixabay.com/video/2023/10/19/185726-876210695_tiny.mp4"
            type="video/mp4"
          />
        </video>
      </Suspense>
    </main>
  );
}

Note: I did not check how this behaves on iOS devices in low power mode

CasacobraOP•3mo ago

yes, this actually fixed the issue, thank you @Madaxen86

timeo•3mo ago

@Casacobra , does this solution work on iOS devices in low power mode?

Madaxen86•3mo ago

I think there should be a .catch() after the play() because on low power it might throw an error.

Gaming

Programming

Safari Video Not AutoPlaying when inside a Suspense