如何解决本地HTML网页随机视频背景加载慢、播放卡顿的问题

1 修复现有代码逻辑bug #

你当前的getRandomInt函数写死了取值范围，完全没有用到传入的min/max参数，会生成1_{7的整数，但你的视频数组下标是0}6，存在数组越界风险，先修正该函数：

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

2 解决加载前白屏问题 #

• 提前给所有视频导出首帧图片，命名和视频一一对应，比如vid.jpg对应vid.mp4，放在同级目录
• 给<video>标签添加poster属性，动态设置为当前选中视频对应的首帧图，加载完成前会显示该图片，不会出现白屏
• 可以给视频容器设置默认背景色，和视频整体风格匹配，作为兜底显示

3 优化视频加载速度 #

• 所有视频压制时开启faststart模式，将视频元数据（MOOV原子）放到文件头部，不需要加载完整文件就可以启动播放
• 采用H.264编码压缩视频，分辨率匹配页面实际显示尺寸，不要使用远超显示需求的4K等大分辨率，码率控制在1~3Mbps左右即可满足网页背景需求
• 给<video>标签设置preload="auto"属性，提示浏览器优先加载该资源

4 解决播放卡顿问题 #

• 压制视频时将关键帧间隔设置为2~4秒，降低播放时的解码压力
• 给<video>标签添加muted playsinline属性，避免浏览器的自动播放限制导致的加载异常
• 监听视频的canplay事件，确认视频加载到足够可播放的缓冲量后再显示视频，避免边加载边播放导致的卡顿

优化后完整逻辑代码 #

// 随机数函数修正
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
var video = document.getElementById('vidtest');
var videoUrlsMp4=["Resources/videos/vid.mp4", "Resources/videos/vid1.mp4", "Resources/videos/vid2.mp4", "Resources/videos/vid3.mp4", "Resources/videos/vid4.mp4", "Resources/videos/vid5.mp4", "Resources/videos/vid6.mp4"];
var random_nr = getRandomInt(0, videoUrlsMp4.length-1);
var selectedVideo = videoUrlsMp4[random_nr];
// 动态设置首帧占位图，这里假设首帧后缀是.jpg，和视频同路径同名
video.poster = selectedVideo.replace('.mp4', '.jpg');
// 设置视频源
video.src = selectedVideo;
// 加载完成可播放后再显示视频，避免卡顿
video.addEventListener('canplay', function() {
  video.style.opacity = '1';
  video.play();
});
video.load();

对应的<video>标签参考配置：

<video id="vidtest" muted playsinline preload="auto" style="opacity:0;transition:opacity 0.3s;width:100%;height:100vh;object-fit:cover;">
</video>

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