CODEWITHSUNDEEP
javascriptnext.jshtml5-videomobile-browser
William Wang
William Wang

Reputation: 11

Video Freezes on Mobile Browser When Setting src through useState, but Plays on Button Click or when set to Muted

Hello StackOverflow Community,

I'm facing an intriguing issue with a video element in my web application. The video is intended to play automatically on both desktop and mobile browsers. However, I'm encountering a specific problem on mobile browsers and PWAs where the video freezes when avatarVideoLink is set to a URL generated from a response (a Blob URL). Interestingly, this issue does not occur on desktop browsers. The video plays as expected when the Talk button is clicked or if the video is muted.

Here's the relevant portion of my code:

const res = await response;
if (res.body instanceof ReadableStream) {
  let responseStream = await new Response(res.body);
  let arrayBuffer = await responseStream.arrayBuffer();
  let blob = new Blob([arrayBuffer], { type: "video/mp4" });
  let url = URL.createObjectURL(blob);
  setAvatarVideoLink(url);
} else {
  setAvatarVideoLink(avatarIdleVideoUrl);
}

// Video component
<video
  key={avatarVideoLink}
  ref={videoRef}
  src={avatarVideoLink}
  autoPlay
  playsInline
  loop={avatarVideoLink === avatarIdleVideoUrl}
  style={{ height: "60vh", borderRadius: "3em", objectFit: "cover" }}
/>

// Button component
<Button
  onClick={() => {
    if (listening) {
      SpeechRecognition.stopListening();
      generateOpenAIResponse(text, true);
    } else {
      resetTranscript();
      setText("");
      SpeechRecognition.startListening({ continuous: true });
    }
  }}
  type={"primary"}
  danger
  loading={avatarIsLoading}
>
  {avatarIsLoading ? avatarStatus : listening ? "Send 📩" : "Talk 🎤"}
</Button>

Behavior Observed:

On desktop browsers: The video plays automatically as expected. On mobile browsers: The video freezes. However, it plays correctly when the Talk button is clicked or if the video is muted. I've checked for any potential issues with the video file itself, but it seems to be fine. I'm suspecting this might be related to mobile browser policies regarding auto-playing videos, but I'm not entirely sure.

Questions:

Why does the video freeze only on mobile browsers when the src is set to the generated URL? Is there any workaround to ensure that the video plays automatically on mobile browsers as it does on desktop browsers? Any insights or suggestions to resolve this issue would be greatly appreciated. Thank you in advance for your help!

When the avatarVideoLink useState is changed, the video should automatically play.

What resulted is the video being loaded but paused. It only autoplays when a button clicked or if the component is set to muted.

Upvotes: 1

Views: 178

Answers (1)

suntzu
suntzu

Reputation: 65

This is mostly a security implemented by Apple for WebKit.

Safari in macOS High Sierra uses an automatic inference engine to block media elements with sound from auto-playing by default on most websites

Websites should assume any use of or requires a user gesture click to play.

Related posts HTML5 Video autoplay on iPhone

tldr; start the video muted and/or prompt the user to interact with video

Upvotes: 0

Related Questions