JS如何获取页面video元素尺寸位置实现加载遮罩层精准定位

问题根因 #

你遇到的定位不稳定问题主要来自以下几个常见误区：

• getBoundingClientRect() 返回的是相对于浏览器视口的坐标值，如果你的.myLoadingScreen 元素的position属性不是fixed，直接使用返回的top值必然会出现错位（父容器的偏移、页面滚动都会影响最终定位结果）
• 你只设置了top属性，没有同步设置left、width、height，无法完整匹配视频元素的尺寸位置
• 视频元数据加载完成前，浏览器不知道视频的实际渲染尺寸，提前获取的getBoundingClientRect()返回值是浏览器默认占位符的尺寸，不是最终渲染的真实值
• 静态setTimeout无法适配不同设备、不同网络环境下的元素渲染节奏，本身就是不可靠的方案

最优解决方案（无需JS计算定位） #

完全不需要用JS动态计算位置，用CSS布局就能100%稳定匹配：

1. 把视频元素和遮罩层放在同一个父容器内：

<div class="videoWrapper">
  <video class="myVideo" autoplay></video>
  <div class="myLoadingScreen">加载中...</div>
</div>

2. 对应CSS设置：

.videoWrapper {
  position: relative;
  /* 可根据业务需求设置父容器尺寸，或者设置为自适应视频尺寸 */
}
.myVideo {
  display: block;
  width: 100%;
  height: auto;
}
.myLoadingScreen {
  position: absolute;
  /* 四个方向都设为0直接铺满父容器，自动和视频尺寸位置完全匹配 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

这个方案不需要任何JS定位逻辑，无论视频尺寸怎么变、页面怎么滚动，遮罩层都会自动匹配位置，稳定性远高于JS计算的方案。

如果你确实需要用JS实现定位 #

如果业务场景不允许修改DOM结构，必须用JS动态计算，按以下步骤修改即可稳定生效：

1. 先确保.myLoadingScreen的position设置为fixed，才能匹配getBoundingClientRect()的视口坐标
2. 监听视频的loadedmetadata事件获取准确的渲染尺寸，同时监听resize事件适配窗口变化
3. 完整设置四个定位属性，示例代码如下：

const video = document.querySelector('.myVideo');
const loadingScreen = document.querySelector('.myLoadingScreen');

// 更新遮罩层位置尺寸的函数
function updateLoadingPos() {
  const rect = video.getBoundingClientRect();
  loadingScreen.style.top = rect.top + 'px';
  loadingScreen.style.left = rect.left + 'px';
  loadingScreen.style.width = rect.width + 'px';
  loadingScreen.style.height = rect.height + 'px';
}

// 视频元数据加载完成后更新位置
video.addEventListener('loadedmetadata', updateLoadingPos);
// 窗口大小变化时更新位置
window.addEventListener('resize', updateLoadingPos);

// 视频可播放后隐藏遮罩层，可替代你原来的轮询逻辑
video.addEventListener('canplay', () => {
  loadingScreen.remove();
});

内容的提问来源于stack exchange，提问作者Simon R.