为什么我使用ARJS开发的AR应用播放视频时只有声音没有画面？

问题修复方案 #

• 位置参数错误：你当前给<a-video>设置的position为200 0 -10，A-Frame默认单位为米，200米的位置远超出相机可视范围，直接修改为合理的近场坐标即可，比如0 0 0，也可以根据你的标记实际大小微调为0 0.5 0这类数值。
• 视频渲染属性缺失：给<a-video>添加flat shader和双面渲染配置，避免光照影响、视角背面导致的画面不可见，参考配置：

<a-video
  width="1.75"
  height="2"
  position="0 0 0"
  rotation="0 90 0"
  src="#video"
  material="shader: flat; side: double;"
></a-video>

• <video>标签补充属性：给<a-assets>里的video标签添加preload="auto" muted属性，部分浏览器要求视频静音才能自动播放，避免播放触发失败，同时添加crossorigin配置适配资源加载：

<video id="video" src="http://localhost:5000/assets/animation.mp4" webkit-playsinline playsinline preload="auto" muted crossorigin="anonymous"></video>

• 编码校验：确认你的animation.mp4使用H.264编码，A-Frame对HEVC等其他编码的视频纹理支持不完善，容易出现有音频无画面的问题。
• 播放逻辑优化：可以在视频播放后主动触发纹理更新，避免纹理缓存导致的画面不刷新，修改controller组件的tick逻辑：

tick: function() {
  const videoEl = document.querySelector('a-video[src="#video"]');
  if (this.el.object3D.visible === true) {
    if (!this.toggle) {
      this.toggle = true;
      this.video.play().then(() => {
        if(videoEl && videoEl.components.material) {
          videoEl.components.material.material.map.needsUpdate = true;
        }
      });
    }
  } else {
    if (this.toggle) {
      this.toggle = false;
      this.video.pause();
    }
  }
}

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