AR.js移动端video元素溢出屏幕问题求助

问题根源 #

AR.js内部会动态计算并覆盖video元素的样式，你手动添加的行内style会被框架的自动调整逻辑冲掉，这就是修改后很快恢复原状的原因。

可行解决方案 #

• 方案1：用CSS强制优先级（最简单）
  给目标video写高优先级CSS，通过!important强制覆盖框架的动态样式：

  #arjs-video {
    width: 100vw !important;
    height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    object-fit: cover; /* 可选，保持视频比例同时填满容器 */
  }
  

  把这段代码放到页面的<style>标签或外部样式文件中，优先级高于行内style，能顶住框架的修改。

• 方案2：监听AR.js初始化事件后修改样式
  AR.js初始化完成会触发对应事件，在这个时机手动设置样式，避免被初始覆盖：

  // 以AR.js的AFrame版本为例
  document.addEventListener('DOMContentLoaded', () => {
    const arScene = document.querySelector('a-scene[arjs]');
    arScene.addEventListener('arjs-video-loaded', () => {
      const video = document.getElementById('arjs-video');
      video.style.width = '100vw';
      video.style.height = '100vh';
      video.style.top = '0';
      video.style.left = '0';
      video.style.margin = '0';
    });
  });
  

  这个方法更优雅，不用依赖!important，适合需要精确控制的场景。

• 方案3：配置AR.js相机参数
  部分AR.js版本支持通过配置项调整视频适配，比如初始化AR场景时设置视频缩放模式：

  <a-scene arjs="trackingMethod: best; videoTexture: true; videoResizeMode: cover;">
    <!-- 你的AR内容 -->
  </a-scene>
  

  不同版本参数可能有差异，可根据所用AR.js版本调整videoResizeMode这类参数，让框架自动适配屏幕。

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