AR.js项目移动端标记点视频不显示、a-video无法居中撑满问题求助

问题1：移动端对准标记点仅显示黑色方块 #

原因：

移动端浏览器出于用户体验和流量管控要求，禁止非用户主动交互触发的视频自动播放。你当前代码中直接在markerFound事件中调用视频play()方法，没有经过用户触摸/点击授权，会被浏览器拦截，导致视频无法加载渲染，仅显示黑色占位区域。

解决步骤：

1. 新增页面初始用户交互授权环节，先通过用户点击解锁视频播放权限
2. 给a-video添加平面着色器和双面渲染配置，避免WebGL背面剔除导致视频不可见
3. 移除video标签中不必要的response-type和无效的autoplay属性

修改的核心代码片段：
首先新增权限获取遮罩：

<div id="permissionMask" style="position: fixed; top:0; left:0; width: 100%; height: 100%; z-index: 10000; background: #000; color: #fff; display: flex; align-items: center; justify-content: center;">点击任意位置启动AR体验</div>

修改逻辑代码：

window.onload = function() {
  const permissionMask = document.querySelector('#permissionMask');
  const vid = document.querySelector("#vid");
  // 点击解锁视频播放权限
  permissionMask.addEventListener('click', () => {
    vid.play().then(() => {
      vid.pause();
      permissionMask.style.display = 'none';
    }).catch(err => console.log('权限获取失败', err));
  });

  AFRAME.registerComponent("videohandler", {
    init: function() {
      var marker = this.el;
      this.vid = vid;
      this.vid.pause();

      marker.addEventListener("markerFound", () => {
        this.vid.play();
      });

      marker.addEventListener("markerLost", () => {
        this.vid.pause();
        this.vid.currentTime = 0;
      });
    }
  });
};

问题2：视频无法铺满标记点、无法居中 #

原因：

1. A-Frame默认单位是米，你当前设置width="208" height="208"对应208米的尺寸，远大于实际标记大小，自然无法匹配
2. NFT标记的识别原点就是标记的中心，你设置position="0 0.1 0"会让视频偏移到标记上方10厘米的位置，无法居中
3. 视频尺寸需要和你制作NFT数据集时的原始标记图片的宽高比、实际物理尺寸完全匹配，才能完全铺满

解决步骤：

1. 先确认你制作NFT标记时使用的原始图片的宽高比，以及打印出来的标记实际物理宽度（单位：米），比如A4纸宽度是0.21米，标记占满A4宽度的话就把width设为0.21，再按照宽高比计算height值
2. 调整a-video配置如下即可实现居中对齐，可根据实际需求调整尺寸参数：

<a-video
  src="#vid"
  scale="1 1 1"
  position="0 0 0.001"
  rotation="-90 0 0"
  material="shader: flat; side: double;"
  class="clickable"
  gesture-handler
  width="0.2"
  height="0.2"
>
</a-video>

3. position的第三个参数设为0.001是为了避免视频和标记平面重合产生渲染闪烁，可根据实际效果调整。

额外注意事项 #

确认你的NFT数据集三个文件nar.iset、nar.fset、nar.fset3都和你填写的url路径一致，缺少任意一个都会导致识别异常；iOS设备需要保证页面运行在HTTPS环境下（本地调试可以用localhost），否则摄像头和视频权限都会被拦截。

内容的提问来源于stack exchange，提问作者Давид Касумов