Hey awesome folks at the StackOverflow Community,
I'm currently encountering a perplexing issue with a video element in my web application. The video is supposed to play automatically on both desktop and mobile browsers. However, I've run into 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). Strangely enough, this issue doesn't manifest on desktop browsers - the video plays as intended either when the Talk button is clicked or if the video is muted.
Below is the pertinent segment 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>
Observed Behavior:
Desktop browsers: The video autoplays without any issues. Mobile browsers: The video freezes initially but resumes when the Talk button is clicked or if the video is muted. Despite checking the video file for problems, everything seems fine. My suspicion lies with potential mobile browser policies concerning autoplay videos, though I can't be certain.
Inquiries:
Why does the video freeze exclusively on mobile browsers when the src is set to the dynamically generated URL? Are there workarounds available to ensure automatic playback of the video on mobile browsers similar to desktop browsers? I'd greatly appreciate any insights or suggestions to help resolve this concern. Thank you all in advance for your assistance!
Upon altering the useState for avatarVideoLink, the video should kick off automatically.
The end result is that the video loads but pauses, requiring manual interaction through a button click or muting the component for autoplay functionality.