如何让React Three Fiber视频纹理在移动浏览器中正常工作？

核心问题排查与修复 #

1. 补全 playsInline 属性赋值 #

原代码仅读取playsInline属性未赋值，移动端浏览器需要该属性允许视频内联播放（而非强制全屏），这是关键缺失项：

const [video] = useState(() => {
  const vid = document.createElement("video");
  vid.src = TikTok;
  vid.crossOrigin = "Anonymous";
  vid.loop = true;
  vid.muted = true;
  vid.playsInline = true; // 修正：赋值为true
  vid.id = "video";
  return vid;
});

2. 通过用户交互触发播放 #

移动端浏览器普遍限制自动播放，即使视频静音，也需要用户点击/触摸等手势启动播放，添加交互事件触发：

useEffect(() => {
  const handlePlay = () => {
    if (video.paused) {
      video.play().catch(err => console.error("播放失败:", err));
    }
  };
  // 绑定页面点击/触摸事件
  window.addEventListener("click", handlePlay);
  window.addEventListener("touchstart", handlePlay);
  
  return () => {
    window.removeEventListener("click", handlePlay);
    window.removeEventListener("touchstart", handlePlay);
  };
}, [video]);

3. 等待视频加载完成再渲染纹理 #

避免因视频未就绪导致纹理空白，监听视频元数据加载事件，就绪后再渲染mesh：

const [videoReady, setVideoReady] = useState(false);

const [video] = useState(() => {
  const vid = document.createElement("video");
  vid.src = TikTok;
  vid.crossOrigin = "Anonymous";
  vid.loop = true;
  vid.muted = true;
  vid.playsInline = true;
  vid.id = "video";
  // 监听元数据加载完成
  vid.addEventListener("loadedmetadata", () => {
    setVideoReady(true);
  });
  return vid;
});

渲染时添加就绪判断：

{videoReady && (
  <mesh
    name="Body_Wallpaper_0001"
    geometry={nodes.Body_Wallpaper_0001.geometry}
    scale={2.03}
    rotation={[0, 0, 0]}
  >
    <meshStandardMaterial side={THREE.DoubleSide}>
      <videoTexture attach="map" args={[video]} />
      <videoTexture attach="emissiveMap" args={[video]} />
    </meshStandardMaterial>
  </mesh>
)}

4. 手动触发纹理更新 #

部分场景下视频播放时纹理不会自动刷新，在动画循环中强制更新：

useFrame(() => {
  if (videoReady && !video.paused) {
    // 获取纹理实例并标记需要更新
    const mapTexture = document.querySelector("videoTexture[attach='map']").instance;
    const emissiveTexture = document.querySelector("videoTexture[attach='emissiveMap']").instance;
    if (mapTexture) mapTexture.needsUpdate = true;
    if (emissiveTexture) emissiveTexture.needsUpdate = true;
  }
});

额外注意事项 #

• 视频格式：优先使用移动端兼容的MP4/H.264格式，避免WebM等兼容性差的格式。
• CORS配置：确认视频资源服务器返回正确的跨域响应头，配合crossOrigin="Anonymous"使用。
• 多端测试：不同移动端浏览器（Safari、Chrome、微信内置浏览器）限制不同，需多设备验证。

内容的提问来源于stack exchange，提问作者Julian Fusco-Wright