多视频页面如何兼顾性能与视频初始尺寸优化？

当设置preload='none'时，浏览器不会加载视频元数据（包括宽高信息），因此会默认以480px作为初始宽度，直到播放时才读取视频实际尺寸调整，导致体验不佳。以下几种方法可以在保留preload='none'性能优势的前提下解决这个问题：

方法1：通过宽高比属性强制适配 #

如果能提前获取到每个视频的宽高比（比如后端返回数据时附带），直接给video标签设置aspect-ratio属性：

<video class='avid' controls preload='none' poster='...' style="aspect-ratio: 16/9;">
  <source src='...' type='video/mp4'>
</video>

或者用CSS结合data属性批量处理：

<video class='avid' controls preload='none' poster='...' data-aspect="16/9">
  <source src='...' type='video/mp4'>
</video>

.parent{width:720px;}
.avid{
  display:block;
  max-width:100%;
  margin:0 auto;
  aspect-ratio: attr(data-aspect);
}

优点：无额外性能开销，直接通过CSS控制；缺点：需要提前获取视频宽高比信息。

方法2：让poster图片与视频同比例 #

确保每个视频的poster封面图和视频本身的宽高比完全一致。浏览器加载poster图片后会识别其尺寸，video元素会自动继承这个比例适配父容器宽度，不再使用默认的480px。
优点：无需额外代码；缺点：依赖poster图的比例准确性，若poster加载较慢，仍会有短暂的默认宽度显示。

方法3：用JS轻量获取视频元数据 #

创建临时的video元素，仅加载视频元数据（不加载视频内容），获取宽高比后给目标视频设置样式，完成后销毁临时元素：

document.querySelectorAll('.avid').forEach(video => {
  const tempVid = document.createElement('video');
  tempVid.src = video.querySelector('source').src;
  tempVid.preload = 'metadata'; // 仅加载元数据，性能影响极小
  tempVid.onloadedmetadata = () => {
    video.style.aspectRatio = `${tempVid.videoWidth}/${tempVid.videoHeight}`;
    tempVid.remove(); // 清理临时元素
  };
});

优点：无需后端配合，自动适配所有视频；缺点：会发起少量元数据请求，但远小于加载视频内容的开销，基本不影响性能。

以上方法均能保留preload='none'的性能优势，同时让视频初始宽度正确适配父容器。

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