视频弹幕看似简单，无非是将文字从右向左飘过画面。然而，真正动手实现一款可用的弹幕播放器时，遇到的坑往往比预想多得多。首先聊聊最容易踩中的第一个——弹幕容器。
弹幕容器必须使用 position: relative 包裹视频
直接给 标签设置 position: relative？这条路走不通。video 标签默认为 inline 元素，绝大多数浏览器并不把它当作可靠的定位上下文。你以为弹幕层写上 position: absolute 就能稳稳覆盖在视频上？实际效果飞到页面左上角或顶部空白区域的案例，比比皆是。
正确的实现方式是：
- 外层需要一个容器，例如
，将 video 包裹起来，并为该容器显式声明position: relative - 容器的宽高必须与视频保持一致。推荐采用
width: 100%搭配aspect-ratio，或者直接指定固定尺寸 - 这里有一个小陷阱：不要试图用
display: flex或grid的父容器来替代position: relative。flex 和 grid 不会自动创建定位上下文，弹幕依然会跑偏
pointer-events: none 是硬性要求
这一点没有任何商量余地。如果弹幕层缺少 pointer-events: none，用户的手指或鼠标将无法点击视频控件——播放暂停按钮、进度条等，全都会被弹幕遮挡。尤其在移动端，这是一个致命问题。
具体需要注意几个要点：
- 弹幕层（例如
#barrageContainer）的样式里必须添加pointer-events: none - 如果业务上需要点击弹幕（比如高亮显示、跳转到对应时间点），不能全局关闭，而应改用
pointer-events: auto配合事件委托，并且只对具体弹幕元素启用 - 旧版 iOS Safari 对
pointer-events: none的支持不够稳定。遇到兼容性问题时，可以用z-index: -1加一层控件覆盖来做兜底处理
transform + transition 比 left 动画稳定得多
很多人习惯用 left 配合 setInterval 或 requestAnimationFrame 来更新弹幕位置。这种做法在低端安卓机和旧款 iPhone 上极易掉帧。而 CSS 的 transform 走的是 GPU 加速，实测在 iPhone 6、Redmi 4 这类老设备上都没有明显卡顿。
实现方式也非常直接：
- 每个弹幕
设置为position: absolute，初始位置transform: translateX(100vw) - 用
transition: transform 8s linear定义动画时长（具体时长根据视频宽度和速度反推） - 动画结束时，监听
transitionend事件来移除 DOM，防止内存堆积 - 千万不要使用 jQuery 的
animate()或者纯 JS 去修改left值——重排重绘的开销太大，移动端尤其承受不住
防重叠与行高控制必须靠 JS 动态计算
CSS 无法自动判断哪一行轨道处于空闲状态。如果硬编码几个固定的 top 值，比如 20px、60px、100px，结果要么弹幕堆叠在一起，要么大片区域空置。轨道分配这件事，必须交给 JavaScript 来处理。
具体操作步骤如下：
- 维护一个数组，记录当前各轨道的占用状态。例如
[false, false, true, false]表示第 3 行已被占用 - 新弹幕插入前，遍历数组找到第一个
false的位置，然后将其设为top: calc(20% * index)或固定像素偏移 - 轨道数量建议控制在 4 到 6 行。太多会遮挡画面，太少又容易造成拥堵。超出容量时，要么丢弃，要么暂存到队列中
- 有一点不能忽略：
font-size和line-height必须固定。否则动态计算出的 top 值会出现错位
在实际项目中，最容易被忽视的往往不是动画怎么写，而是轨道管理虽然做了，却没有及时清理已移出屏幕的弹幕节点。内存泄漏比卡顿更隐蔽，也更难调试。因此，清理 DOM 这件事，务必与轨道分配一同纳入代码逻辑。
