你好StackOverflow社区，
我的Web应用程序中的视频元素遇到了一个有趣的问题。该视频旨在在桌面和移动的浏览器上自动播放。然而，我在移动的浏览器和PWA上遇到了一个特定的问题，当avatarVideoLink设置为从响应生成的URL时，视频冻结（一个Blob URL）。有趣的是，这个问题不会发生在桌面浏览器上。当单击“Talk”按钮或视频静音时，视频会按预期播放。
下面是我的代码的相关部分：

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>

字符串
观察到的行为：
在桌面浏览器上：视频按预期自动播放。在移动的浏览器上：视频冻结。但是，当单击“通话”按钮或视频静音时，它可以正常播放。我已经检查了视频文件本身的任何潜在问题，但似乎没有问题。我怀疑这可能与移动的浏览器有关自动播放视频的策略有关，但我不完全确定。
问题：
当src设置为生成的URL时，为什么视频仅在移动的浏览器上冻结？是否有任何解决方法来确保视频在移动的浏览器上自动播放，就像在桌面浏览器上一样？任何解决此问题的见解或建议都将不胜感激。提前感谢您的帮助！
更改avatarVideoLink useState时，视频应自动播放。
结果是视频被加载但暂停。只有当点击按钮或组件设置为静音时才会自动播放。