本文介绍如何通过 html 属性配合 javascript 控制，实现大体积背景视频（如 9mb webm）的真正懒加载，避免阻塞 css/js 加载，并在加载完成后自动静音循环播放。
本文介绍如何通过 html 属性配合 javascript 控制，实现大体积背景视频（如 9mb webm）的真正懒加载，避免阻塞 css/js 加载，并在加载完成后自动静音循环播放。
在网页中使用 <video></video> 作为全屏背景时，若视频体积较大（例如 9MB 的 .webm 文件），直接设置 autoplay 会导致浏览器优先下载视频资源，严重拖慢首屏渲染、CSS 和 JS 的解析执行——尤其在弱网环境下。关键问题在于：preload="none" 在存在 autoplay 时会被浏览器忽略，因此必须移除 autoplay，改用 JavaScript 显式控制加载与播放时机。
✅ 正确做法如下：
-
HTML 结构（移除
autoplay，保留懒加载语义）<video id="bgVideo" muted loop preload="none" poster="{{ asset('img/web/intro_video_placeholder.webp') }}" loading="lazy" aria-hidden="true"><source src="%7B%7B%20asset('img/web/video/intro_video.webm')%20%7D%7D" type="video/webm"></source></video>✅
loading="lazy"告知现代浏览器延迟加载（Chrome 76+ 支持）；
✅preload="none"配合无autoplay才生效，确保初始不预取；
✅aria-hidden="true"提升可访问性，明确该视频仅为装饰用途。 -
JavaScript 控制：加载就绪后自动播放
document.addEventListener('DOMContentLoaded', () => { const video = document.getElementById('bgVideo');
if (!video) return;
// 方案一：监听 canplaythrough（推荐）→ 表示足够数据可流畅播放 video.addEventListener('canplaythrough', () => { video.play().catch(e => { console.warn('Auto-play prevented (e.g., by user gesture policy):', e); // 可选：降级为显示 poster 或提示用户点击播放 }); });
// 方案二（备选）：监听 load（仅资源加载完成，不保证可播） // video.addEventListener('loadeddata', () => video.play().catch(console.warn)); });
⚠️ 注意事项： - 浏览器策略要求视频自动播放必须满足「静音（`muted`）」条件，已满足； - `canplaythrough` 比 `loadeddata` 更可靠——它表示缓冲区足以支持连续播放，避免卡顿； - 若用户禁用自动播放或启用了数据节省模式，`.play()` 可能抛出 `NotAllowedError`，务必用 `try/catch` 或 `.catch()` 处理； - 建议为视频添加 `width="100%" height="100%"` 并配合 CSS `object-fit: cover` 实现响应式背景效果； - 进阶优化：可结合 `IntersectionObserver` 实现“进入视口才加载”，进一步节省带宽（适用于非首屏视频背景）。 总结：真正的视频懒加载 ≠ 仅加 `loading="lazy"`，而是需 **移除 `autoplay` + `preload="none"` + JavaScript 监听播放就绪事件** 三者协同。这样既保障首屏性能，又确保用户体验无缝衔接。
