弹幕容器必须用 position: relative 包裹视频，不可直接设在 video 标签上；弹幕层需加 pointer-events: none 以保障控件可点击；动画优先用 transform + transition；轨道分配须 js 动态计算并及时清理 dom。
弹幕容器必须用 position: relative 包裹视频
直接对 <video></video> 标签设 position: relative 是无效的——它默认是 inline 元素，且多数浏览器不将其视为可靠的定位上下文。常见错误是只给弹幕层设 position: absolute，结果弹幕飞到页面左上角或顶部空白处。
- 外层必须用
<div class="video-wrapper"> 这类容器包裹 <code><video></video>，并显式声明position: relative - 该容器宽度/高度需与视频一致（推荐用
width: 100%+aspect-ratio或固定尺寸） - 避免用
display: flex或grid的父容器替代position: relative——flex/grid 不自动创建定位上下文 - 弹幕层（如
#barrageContainer）样式中必须包含pointer-events: none - 如果需要响应弹幕点击（比如高亮、跳转时间点），不能全局关掉，得改用
pointer-events: auto配合事件委托，且只对具体弹幕元素启用 - 部分旧版 iOS Safari 对
pointer-events: none支持不稳定，若遇兼容问题，可用z-index: -1+ 单独一层控件覆盖来兜底 - 每个弹幕
<span></span>设position: absolute，初始transform: translateX(100vw) - 动画用
transition: transform 8s linear（时长按视频宽度和速度反推） - 结束时监听
transitionend事件移除 DOM，避免内存堆积 - 别用 jQuery
animate()或纯 JS 修改left值——重排重绘开销大，移动端尤其明显 - 维护一个数组记录当前各“轨道”的占用状态（例如
[false, false, true, false]表示第 3 行被占） - 新弹幕插入前遍历数组找第一个
false位置，设为top: calc(20% * index)或固定像素偏移 - 轨道数建议设 4–6 行，太多易遮挡画面，太少易拥堵；超出容量时可丢弃或暂存队列
- 注意：
font-size和line-height必须固定，否则动态计算的 top 值会错位
pointer-events: none 必须加在弹幕层上
否则用户点不到视频控件（比如播放/暂停按钮、进度条），尤其在移动端会直接失效。这不是可选项，是必填项。
弹幕元素用 transform + transition 比 left 动画更稳
用 left 配合 setInterval 或 requestAnimationFrame 更新位置，在低端安卓机和旧 iPhone 上容易掉帧；而 CSS transform 走 GPU 加速，实测在 iPhone 6、Redmi 4 等设备无卡顿。
防重叠和行高控制得靠 JS 动态计算
CSS 无法自动判断哪一行空闲，硬写死 top: 20px、top: 60px 会导致弹幕堆叠或大片留白。必须用 JS 实时分配垂直位置。
真实项目里最容易被忽略的不是动画怎么写，而是轨道管理没做或做了但没清空已移出屏幕的弹幕节点——内存泄漏比卡顿更隐蔽，也更难 debug。
