HTML5无background-video标签，实现动态背景仅两种可靠方案：一是用video全屏覆盖并加transform视差，需muted、preload="auto"、object-fit:cover及节流scroll监听；二是canvas配合requestAnimationFrame绘制，须同步设置宽高属性并避免频繁对象创建。
HTML5 里没有 background-video 这种原生标签
很多人搜“HTML5 动态背景”，第一反应是加个自动播放的 或 ，但直接塞进 body 背景会出问题：视频不铺满、滚动时卡顿、移动端静音限制导致无声（如果带音频）、Safari 下 autoplay 失效。真正可用的方案只有两种：用 做全屏覆盖层，或用 requestAnimationFrame + canvas 手动绘制。前者简单可控，后者灵活但需自己管性能。
用
核心思路是把视频作为固定定位的底层元素，内容区域用 position: relative 叠在上面，并通过 transform: translateY() 模拟视差偏移。关键点：
-
必须设preload="auto"和muted（否则 Chrome/Safari 拒绝自动播放） - 用
object-fit: cover铺满，配合width: 100vw; height: 100vh;和position: fixed; top: 0; left: 0; z-index: -1; - 视差滚动靠监听
scroll事件，计算window.scrollY * 0.3这类系数后更新视频的transform: translateY()—— 注意别直接改top，会触发重排 - 必须加
will-change: transform提升到合成层，否则 iOS 上一卡一卡
示例片段：
你的文字内容
Canvas 动态背景的轻量替代方案
如果只是粒子、波纹、渐变流动这类效果， 比视频更省资源，也绕过静音限制。但注意：canvas 绘制频率必须和屏幕刷新率同步，否则掉帧明显：
立即学习“前端免费学习笔记（深入）”；
- 用
requestAnimationFrame替代setInterval - 每次清空画布前用
ctx.clearRect(0, 0, canvas.width, canvas.height)，别用fillRect盖黑底（性能差） - 移动端务必监听
resize并重设canvas.width/height（CSS 缩放会导致模糊） - 避免在动画循环里反复创建对象（如 new Image()），提前实例化好
常见坑：canvas 默认尺寸是 300×150，光写 style="width:100%;height:100%" 不行，必须同步改 canvas.width 和 canvas.height 属性。
视差滚动本身不是 HTML5 特性，而是 CSS + JS 协同结果
所谓“HTML5 视差”，其实是利用了现代浏览器对 transform 的硬件加速能力。纯 CSS 方案（如 background-attachment: fixed）在移动端基本失效，且不支持多层不同速度。真正可靠的视差必须用 JS 计算滚动比例，再分别驱动各层 transform。容易被忽略的是：滚动事件高频触发，必须节流（throttle），否则 iPhone 上直接卡死；另外，scrollY 在 iOS Safari 中可能为 0（页面未设 viewport 或 body 有 margin），要先确保 和 body { margin: 0; }。
