video加载二三事

摘要
最近在做即时通信项目，就是类似微信、钉钉那种聊天web项目，加载多个video和audio的时候页面会明显卡顿，经过查询资料后特意梳理一下3个属性；以后可以根据自己的需求使用正确的方法;

<video preload="metadata" controls>
  <source src="your-video.mp4" type="video/mp4">
</video>

preload 属性用于控制浏览器如何加载视频。 preload 属性有以下三个可能的值：

• auto：视频会在页面加载时开始预加载。
• metadata：仅视频元数据（如时长，分辨率等）会在页面加载时预加载。
• none：视频不会在页面加载时预加载。

这三种值之间的区别如下：

• auto：这是默认值，意味着视频将在页面加载时开始预加载，直到第一帧加载完毕后停止预加载。这意味着，即使用户不播放视频，视频仍会在后台预加载。这种预加载的优点是，用户在准备播放视频时可以更快地开始播放，缺点是它使用了更多的带宽和资源，因为它在后台预加载视频。

• metadata：这意味着只有视频的元数据（如时长，分辨率等）会在页面加载时预加载。这种方式不会在后台预加载整个视频，因此使用的带宽和资源较少。用户必须点击播放按钮才能加载完整的视频。这种方式的优点是它节省了带宽和资源，缺点是用户必须等待一段时间才能播放视频。

• none：这意味着视频不会在页面加载时预加载。这种方式不会在后台预加载视频，也不会预加载任何元数据。用户必须点击播放按钮才能开始加载和播放视频。这种方式的优点是它使用的带宽和资源最少，缺点是用户必须等待最长的时间才能开始播放视频。

综上所述，选择何种 preload 值取决于您的应用程序的具体需求。如果您希望用户能够更快地开始播放视频并且不介意在后台使用更多的带宽和资源，则应该选择 auto。如果您希望节省带宽和资源并且不介意用户需要等待一段时间才能开始播放视频，则应该选择 metadata。如果您希望最小化带宽和资源使用并且不介意用户需要等待最长的时间才能开始播放视频，则应该选择 none。