弹幕容器必须用absolute定位作为video同级兄弟元素，父容器设relative，z-index≥10，单条弹幕设pointer-events:none，禁用left/top动画，移动端用rem字体并限制数量。
弹幕容器必须用 absolute 定位覆盖视频
HTML 弹幕要浮在视频上方，核心是层级（z-index）和定位方式。如果用 relative 或默认文档流，弹幕会被视频控件或 poster 图层压住；必须让弹幕容器脱离文档流、全宽铺满、且 z-index 高于 <video></video> 自身及其 shadow DOM 内的控件（如 Chrome 的默认控制栏）。
常见错误是把弹幕塞进 <video></video> 内部——这不可靠，因为浏览器可能重绘控件层时清空子节点；正确做法是将弹幕容器作为 <video></video> 的**同级兄弟元素**，用 CSS 精确叠放：
-
position: absolute，父容器（如包裹<video></video>的<div>）需设 <code>position: relative - 容器
width: 100%、height: 100%，top: 0、left: 0 -
z-index至少设为10（<video></video>默认为0；Chrome 控件层约在5–8，保险起见用10+） - 每条弹幕用
<span></span>或<div> 渲染，单独加 <code>style="pointer-events: none;" - 弹幕容器自身保持
pointer-events: auto（默认值），不干扰事件冒泡 - 避免给整个容器设
opacity: 0.9类样式——这会间接导致 iOS 上 touch 事件丢失 - 给弹幕容器父 wrapper 加
transform: translateZ(0)或will-change: transform，强制创建新层叠上下文，隔离浏览器控件层的影响 - 监听
fullscreenchange事件，在全屏切换后重新设置弹幕容器的z-index（例如从10改为1000） - 避免在
<video></video>上直接写内联style="z-index: 1"——它不会生效，因为<video></video>默认不是定位元素 - 字体统一用
rem，根字体设为16px，通过媒体查询在移动端放大（如14px → 16px） - 单屏最多活跃弹幕数限制在
30条以内，超出则丢弃或合并（如相同内容 2 秒内重复出现只留一条） - 动画必须用
transform+opacity，禁用left/top位移——否则触发 layout，iOS 上掉帧明显
video 元素本身不能设 pointer-events: none
有些方案为避免弹幕遮挡点击，给弹幕容器加 pointer-events: none，再给 <video></video> 加 pointer-events: auto。但问题在于：一旦 <video></video> 上层有透明区域（比如弹幕未覆盖处），用户仍可点到视频，但若弹幕密集，手指/鼠标实际落在文字上却触发了播放/暂停——体验错乱。更糟的是，部分移动端浏览器（如 iOS Safari）对 pointer-events 支持不稳定，可能导致全屏按钮失效。
真正可行的做法是：只对弹幕单条 DOM 节点设 pointer-events: none，保留容器整体可穿透，同时确保 <video></video> 始终响应交互：
立即学习“前端免费学习笔记（深入）”；
层级冲突常因 video 的 controls 属性或全屏行为触发
当 <video controls></video> 开启时，浏览器原生控件（播放按钮、进度条等）会动态插入 shadow DOM，并可能提升自身 z-index。某些版本 Edge 和 Safari 在进入全屏后，还会重置所有同级元素的堆叠上下文，导致弹幕突然“掉到视频下面”。
应对策略不是硬调 z-index 数值，而是主动管理堆叠上下文：
移动端适配要注意字体大小与渲染性能
PC 上弹幕用 px 单位+ requestAnimationFrame 移动很稳，但 iOS Safari 对 transform: translateX() 的 subpixel 渲染不一致，小字号（如 12px）弹幕容易模糊或抖动；Android 部分 WebView 则对大量 absolute 元素重排压力大，滑动卡顿。
实操建议：
最易被忽略的一点：弹幕容器的 font-smoothing 和 -webkit-font-smoothing 必须显式设为 antialiased，否则 iOS 上文字边缘发虚，像半透明一样渗进视频画面里。
