如何解决单页面多HTML video添加后卡顿冻结问题？

关于添加id的作用 #

添加id不能直接解决卡顿问题，它仅用于唯一标识视频元素，方便后续用JavaScript控制播放/暂停等操作，但对视频播放性能本身没有影响。

解决多视频卡顿的实用方法 #

1. 仅播放视口内的视频（核心优化） #

多个视频同时自动播放会占用大量CPU、内存和带宽，最有效的优化是只让当前处于浏览器视口内的视频播放，滚动出视口则暂停。可以用IntersectionObserver API实现，代码示例：

<!-- 给所有视频添加统一类名，比如video-item -->
<video class="video-item" width="100%" height="100%" loop muted playsinline preload="metadata">
  <source src="videos/Utopia-Pt1-Intro.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>
<video class="video-item" width="100%" height="100%" loop muted playsinline preload="metadata">
  <source src="videos/another-video.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>

<script>
// 监听视频是否进入视口
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    entry.isIntersecting ? entry.target.play() : entry.target.pause();
  });
}, { threshold: 0.5 }); // 视频50%进入视口时触发操作

// 给所有视频绑定监听
document.querySelectorAll('.video-item').forEach(video => {
  observer.observe(video);
});
</script>

注：muted和playsinline是现代浏览器允许自动播放的必要属性；preload="metadata"仅加载视频元数据，避免预加载大量视频文件占用带宽。

2. 优化视频文件本身 #

视频体积过大是卡顿的常见根源，可做以下优化：

• 压缩视频：用工具（如FFmpeg）降低码率、分辨率，比如将1080p视频转为720p，码率控制在1-2Mbps；
• 使用高效编码：优先选择H.264（兼容性好）或AV1（压缩率更高）编码格式；
• 提供多分辨率源：用多个source标签提供不同清晰度的视频，让浏览器根据网络和设备自动选择：

<video class="video-item" width="100%" height="100%" loop muted playsinline preload="metadata">
  <source src="videos/video-720p.mp4" type="video/mp4">
  <source src="videos/video-480p.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>

3. 限制同时播放的视频数量 #

如果页面视频数量极多，即使在视口内，也可以限制同时播放的数量（比如最多2个），避免资源耗尽：

let playingVideos = [];
const maxPlaying = 2;

document.querySelectorAll('.video-item').forEach(video => {
  video.addEventListener('play', () => {
    playingVideos.push(video);
    if (playingVideos.length > maxPlaying) {
      // 暂停最早播放的视频
      playingVideos[0].pause();
      playingVideos.shift();
    }
  });
  video.addEventListener('pause', () => {
    // 从播放列表移除已暂停的视频
    playingVideos = playingVideos.filter(v => v !== video);
  });
});

4. 确保硬件加速开启 #

多数浏览器默认开启视频硬件加速，若关闭会导致CPU负载飙升。可在浏览器设置中确认“硬件加速”选项处于开启状态，让视频由GPU渲染，降低CPU压力。

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