A-Frame AR模式下视频无法播放 求技术解决方案

我在AR模式下无法播放视频，有没有人成功实现过？

• 预览中视频正常加载播放
• AR模式下仅显示黑色矩形

视频在预览面板可正常播放，但在Quest Pro设备测试时仅显示黑色矩形。相关代码如下：

资源定义代码 #

<a-assets>
  <video
    id="VIDEO"
    autoplay
    loop="false"
    src="https://cdn.glitch.global/e8fff10e-a82b-4ead-9113-ec7b3bc281e3/SW_01.mp4?v=1673674215025"
  ></video>
</a-assets>

AR场景中的视频元素 #

<a-video src="#VIDEO" position="-.5 1.5 -1" width="1.3" height=".5" rotation="0 45 0"></a-video>

可能的解决方法 #

• 检查视频编码兼容性：Quest Pro推荐使用H.264 Baseline或Main Profile编码，分辨率建议不超过1920x1080。可以用FFmpeg等工具转码视频，确保格式符合VR/AR设备要求。
• 添加交互触发播放：AR环境下浏览器自动播放限制更严格，添加点击/手势触发逻辑：

  // 监听场景点击事件触发视频播放
  document.querySelector('a-scene').addEventListener('click', () => {
    const video = document.querySelector('#VIDEO');
    if (video.paused) video.play();
  });
  

• 确保资源加载完成：监听视频加载事件，在资源就绪后再渲染到AR场景：

  document.querySelector('#VIDEO').addEventListener('loadeddata', () => {
    console.log('视频加载完成');
    // 可在此处初始化AR场景中的视频元素
  });
  

• 排查CORS与HTTPS问题：确认视频CDN允许跨域访问，检查浏览器控制台是否有跨域报错，必要时在Glitch项目中配置CORS响应头。

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