通过 useState 设置 src 时，视频在移动浏览器上冻结，但在单击按钮或设置为静音时播放

Question

StackOverflow 社区您好，

我的网络应用程序中的视频元素面临着一个有趣的问题。该视频旨在在桌面和移动浏览器上自动播放。但是，我在移动浏览器和 PWA 上遇到了一个特定问题，当 avatarVideoLink 设置为从响应生成的 URL（Blob URL）时，视频会冻结。有趣的是，这个问题在桌面浏览器上不会发生。单击“谈话”按钮或视频静音时，视频将按预期播放。

这是我的代码的相关部分：

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 更改时，视频应该自动播放。

导致视频正在加载但暂停。仅当单击按钮或组件设置为静音时，它才会自动播放。

Answer 1

这主要是Apple为WebKit实现的安全性。

macOS High Sierra 中的 Safari 使用自动推理引擎来 默认情况下，阻止带有声音的媒体元素自动播放 网站

网站应假设用户使用或需要用户 手势点击即可播放。

相关文章iPhone 上的 HTML5 视频自动播放

tldr；启动视频静音和/或提示用户与视频交互