直播带货页视频与商品自动对齐需满足：先校验video.readyState===4再设置currentTime，用requestAnimationFrame节流滚动监听，以IntersectionObserver检测商品视口可见性（root设为实际滚动容器、threshold设多档位），MP4关键帧间隔≤2s或HLS用hls.js，静音降速替代暂停，时间对齐允许±0.5s缓冲。
怎么让视频播放和商品滚动自动对齐
直播带货页的核心不是“能放视频+能列商品”，而是用户看到某款商品时，视频刚好播到对应讲解片段。靠人手动拖动不现实，得用 currentTime 和商品锚点联动。
常见错误是监听 scroll 后直接改 video.currentTime，结果卡顿、跳帧、甚至触发多次重复设置。根本原因是没做节流，也没考虑视频加载状态（比如 readyState 小于 4 时设时间无效）。
- 先检查
video.readyState === 4再操作currentTime - 用
requestAnimationFrame替代scroll频繁回调，避免丢帧 - 商品 DOM 区域用
getBoundingClientRect()判断是否进入视口，别依赖scrollTop算像素偏移——滚动容器可能不是document，而是某个div的overflow-y: auto - 视频时间戳和商品数据里的
startAt字段要统一单位（秒，非毫秒）
为什么 video 加了 preload="metadata" 还卡
直播带货页常把视频切片成多个 .mp4 或用 HLS，但开发者只加了 preload="metadata" 就以为够了，实际首帧仍延迟明显。这是因为元数据只包含宽高、时长等，不包含关键帧索引——浏览器得边下边解码才能定位到指定 currentTime。
- HLS 场景必须用
hls.js，原生video标签不支持.m3u8自动分片加载和精准 seek - MP4 必须确保 keyframe 间隔 ≤ 2s（用
ffprobe -v quiet -show_entries stream=avg_frame_rate -of csv=p=0 input.mp4查），否则currentTime = 15.3会跳到最近关键帧（比如 16.0），造成口型/商品错位 -
preload="auto"在移动端常被忽略，但 iOS Safari 默认禁用自动播放，需配合muted和用户手势触发
商品列表滚动时视频暂停又恢复很突兀
为省流量或防干扰，有些方案在商品区域滚出视口时 pause() 视频，回来再 play()。问题在于：iOS 限制非静音视频不能自动播放，play() 会直接失败并抛 NotAllowedError；Android Chrome 虽允许，但反复启停会让音频断续、时间轴错乱。
立即学习“前端免费学习笔记（深入）”；
- 别停视频，改用
video.volume = 0静音 +video.playbackRate = 0.1降速（视觉上近乎暂停，但时间轴持续走） - 检测到用户主动点击商品时，再恢复
volume = 1和playbackRate = 1，此时已有用户手势上下文，不会被拦截 - 避免监听
visibilitychange做全局暂停——直播页常有弹窗、评论浮层，页面 visibility 可能频繁切换，导致误判
用 IntersectionObserver 监听商品可见性却总漏触发
IntersectionObserver 是目前最稳的视口检测方式，但新手常漏掉两个硬约束：一是 root 必须设为实际滚动容器（不是默认 document），二是 threshold 设太高（如 [0.5]）导致商品刚露一半就触发，还没来得及对齐视频就跳走了。
- 滚动容器如果是
<div class="goods-list">，构造时必须写new IntersectionObserver(cb, { root: document.querySelector('.goods-list') }) -
threshold推荐用[0, 0.1, 0.9, 1]多档位，方便区分“刚进入”“快出”“完全可见”等状态 - 每个商品 DOM 要调用
observer.observe(itemEl)，别只 observe 父容器——父容器始终在视口里，根本不会触发回调 - 注意动态插入商品时，得对新节点重新
observe()，Vue/React 的 ref 或 useEffect 里容易忘这步
最麻烦的其实是时间戳对齐精度：视频解码耗时、JS 执行延迟、滚动惯性都会让“看到商品A”和“视频播到A”之间差个 100–300ms。别指望一次对齐到位，得允许 ±0.5s 的缓冲区间，并在用户手动拖动视频后重置同步逻辑。
