不能，video标签需配合transform实现视差效果；因其为替换元素，不响应background属性，必须用translateY()驱动位移，并监听scroll和touchmove事件，在requestAnimationFrame中更新，且需等待readyState为4后启动。
video 标签能直接当视差背景用吗？不能，必须配合 transform
直接把 <video> 放进页面、设 position: fixed 或 background-attachment: fixed 是无效的——<video> 是替换元素，不响应 background 相关属性，也不能被 background-attachment 控制。想让它“动起来”，唯一可靠路径是把它当作一个普通 DOM 元素，用 transform: translateY() 驱动位移。
为什么不能只靠 CSS 实现 video 视差？Safari 和安卓 WebView 会吃掉 scrollY
移动端（尤其是 iOS Safari）在滚动时不会实时更新 window.scrollY，除非你主动触发重绘或监听 touchmove。如果 JS 只监听 scroll，video 就会卡住不动，或者突然跳变。这不是代码写错，是浏览器策略限制。
- 必须同时监听
scroll和touchmove，并在touchmove中调用event.preventDefault()（仅对目标容器，避免影响全局滚动） - 所有位移计算必须包裹在
requestAnimationFrame中，否则 iOS 上帧率会掉到 10fps 以下 - 别用
scrollTop或getBoundingClientRect().top读取位置——video 元素本身没有滚动行为，它只依赖window.scrollY
video 视差的最小可行结构与关键 CSS
结构上要隔离 video 层和内容层，避免 z-index 错乱或 pointer-events 干扰。最简结构是：
<div class="parallax-container">
<video class="parallax-video" muted autoplay loop preload="auto">
<source src="bg.mp4" type="video/mp4">
</video>
<div class="content-layer">你的文字/按钮等</div>
</div>对应关键 CSS：
立即学习“前端免费学习笔记（深入）”；
-
.parallax-container必须设height: 100vh（不是min-height），否则 video 无法铺满且 transform 失效 -
.parallax-video要加position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; - 必须加
will-change: transform到 video 元素上，否则 Chrome/Safari 会降级为 CPU 渲染，视频卡顿明显 - 禁用
pointer-events: none——除非你确认内容层完全覆盖，否则点击会穿透到 video，触发默认播放控件
JS 驱动 video 视差的三行核心逻辑
不是写一整套库，而是聚焦“滚动时让 video 慢速上移”这个动作。真正生效的就这三行，其余都是防错和兼容：
let lastScrollY = 0;
function updateParallax() {
const speed = 0.3; // 系数越小，video 移动越慢，视差感越强
const offset = -window.scrollY * speed;
videoEl.style.transform = `translateY(${offset}px)`;
}
window.addEventListener('scroll', () => requestAnimationFrame(updateParallax));
// 补充 touchmove 兜底
window.addEventListener('touchmove', (e) => {
lastScrollY = window.scrollY;
requestAnimationFrame(updateParallax);
});容易被忽略的是：video 加载完成前就执行 transform，会导致初始偏移错位。必须等 videoEl.readyState === 4（HAVE_ENOUGH_DATA）再启动监听，否则首屏闪动或黑块不可避免。
