HTML5 VideoElement在Apple Vision Pro模拟器VR模式下播放异常问题

问题场景 #

• 基于ThreeJS开发WebVR视频播放器，将VideoTexture映射至平面，常规3D视图在Chrome、Safari中运行正常
• Chrome及Chrome WebXR插件环境下，进入/退出VR模式时视频可持续播放
• Apple Vision Pro模拟器的Safari 3D模式中：触发VR模式（确认弹窗弹出时），视频纹理停止更新、声音暂停，但视频时间轴仍在推进；退出VR模式后，视频会从VR开启期间流逝的时间点继续播放

可行解决方案 #

1. 监听WebXR会话状态，强制更新视频纹理 #

Vision Pro的Safari可能在VR会话启动时暂停了视频渲染管线，而非视频本身。通过监听会话状态事件，主动标记纹理需要更新：

// 监听XR会话启动/结束事件
xrSession.addEventListener('sessionstart', () => {
  videoTexture.needsUpdate = true;
  // 确保视频维持播放状态
  videoElement.play().catch(err => console.error(err));
});

xrSession.addEventListener('sessionend', () => {
  videoTexture.needsUpdate = true;
});

// 在动画循环中强制标记更新，避免浏览器优化暂停纹理渲染
function animate() {
  requestAnimationFrame(animate);
  if (videoTexture) videoTexture.needsUpdate = true;
  renderer.render(scene, camera);
}

2. 绑定用户交互触发视频播放+XR会话启动 #

Vision Pro的Safari对VR模式下的媒体播放有额外权限限制，需在用户主动操作（如点击VR按钮）时先启动视频播放，再开启XR会话：

vrButton.addEventListener('click', async () => {
  // 先确保视频进入播放状态
  await videoElement.play();
  // 再启动XR会话
  await xrSession.start();
});

3. 用WebXR专属动画帧同步纹理更新 #

在VR会话中，使用WebXR提供的requestAnimationFrame替代全局帧循环，保证纹理更新与VR渲染帧同步：

function xrAnimationFrame(time, frame) {
  const session = frame.session;
  session.requestAnimationFrame(xrAnimationFrame);
  
  // 每帧强制更新视频纹理
  if (videoTexture) videoTexture.needsUpdate = true;
  
  // 执行VR场景渲染逻辑
  // ...
}

xrSession.addEventListener('sessionstart', () => {
  xrSession.requestAnimationFrame(xrAnimationFrame);
});

4. 处理视频元素可见性状态异常 #

Safari可能在VR模式下将视频元素标记为不可见，导致渲染暂停。监听可见性变化并强制恢复播放：

videoElement.addEventListener('visibilitychange', () => {
  if (videoElement.visibilityState === 'hidden' && xrSession?.isActive) {
    videoElement.play().catch(err => console.error(err));
    videoTexture.needsUpdate = true;
  }
});

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