通过useState设置视频src时移动端卡顿，点击按钮或静音可播放

问题1：移动端使用Blob URL时视频卡顿（暂停）的原因 #

这是移动端浏览器自动播放政策限制导致的：

• 多数移动端浏览器（如Chrome、Safari）要求视频自动播放必须满足两个条件之一：视频处于静音状态，或者播放触发来自明确的用户交互（点击、触摸等）。
• 动态生成的Blob URL会被浏览器视为非同源的动态资源，不会默认赋予自动播放权限；而静态的avatarIdleVideoUrl因为是同源静态资源，大概率符合浏览器的自动播放判定条件。
• 点击Talk按钮属于明确的用户交互，触发后浏览器会解除播放限制；设置静音则直接满足自动播放的静音要求，因此视频能正常播放。

问题2：实现移动端自动播放的解决方案 #

针对你的场景，提供以下几种可行方案：

方案1：添加静音属性（最简单直接） #

给video标签加上muted属性，移动端浏览器允许静音视频自动播放，这是最快的解决方式：

<video
  key={avatarVideoLink}
  ref={videoRef}
  src={avatarVideoLink}
  autoPlay
  playsInline
  muted // 新增静音属性
  loop={avatarVideoLink === avatarIdleVideoUrl}
  style={{ height: "60vh", borderRadius: "3em", objectFit: "cover" }}
/>

如果业务需要播放声音，可以在用户第一次交互（比如点击Talk按钮）后取消静音：

// 在Button的onClick逻辑中添加静音切换
onClick={() => {
  videoRef.current && (videoRef.current.muted = false);
  // 原有逻辑...
}}

方案2：主动触发播放并处理权限错误 #

在avatarVideoLink更新后，主动调用视频的play()方法，同时捕获权限错误（若用户未授权自动播放）：

// 优化Blob生成逻辑 + 触发播放
const res = await response;
if (res.body instanceof ReadableStream) {
  const blob = await res.blob(); // 直接用res.blob()替代arrayBuffer转换，更高效
  const url = URL.createObjectURL(blob);
  setAvatarVideoLink(url);
  // 等待组件更新后尝试播放
  setTimeout(() => {
    videoRef.current?.play().catch(err => {
      console.log("自动播放被阻止，需用户交互触发:", err);
      // 可在此显示提示引导用户点击播放
    });
  }, 100);
} else {
  setAvatarVideoLink(avatarIdleVideoUrl);
}

也可以用React的useEffect监听avatarVideoLink变化，触发播放：

useEffect(() => {
  if (videoRef.current && avatarVideoLink) {
    videoRef.current.play().catch(err => {
      console.log("自动播放失败:", err);
    });
  }
}, [avatarVideoLink]);

方案3：优化Blob资源加载方式 #

直接使用Response.blob()获取Blob对象，避免手动转换arrayBuffer，减少资源处理开销，同时可能让浏览器更好地识别资源类型：

// 替换原Blob生成逻辑
const res = await response;
if (res.body instanceof ReadableStream) {
  const blob = await res.blob();
  const url = URL.createObjectURL(blob);
  setAvatarVideoLink(url);
} else {
  setAvatarVideoLink(avatarIdleVideoUrl);
}

方案4：利用用户交互预授权 #

如果用户有过初始交互（比如首次打开页面时点击过任意按钮），可以在交互时提前获取播放权限：

// 首次用户交互时预加载权限
const handleFirstInteraction = () => {
  videoRef.current?.play().catch(() => {}); // 即使失败也不影响，仅用于获取权限
};

// 在页面初始引导按钮上绑定该方法
<button onClick={handleFirstInteraction}>开始使用</button>

内容的提问来源于stack exchange，提问作者William Wang