html5的play()仅控制视频播放，弹幕需javaScript手动实现：解析数据、创建元素、计算轨迹、定时渲染；须监听timeupdate事件、处理自动播放策略、单独加载弹幕文件。
html5 本身没有 play() 函数支持弹幕，所谓“play() 播弹幕视频”是常见误解——play() 只控制原生 元素的媒体播放，弹幕需完全由 javascript 手动实现。
弹幕不是 HTML5 原生能力，得自己画
浏览器的 标签只负责解码和渲染视频帧，不解析、不渲染任何弹幕数据。所有弹幕（无论 xml、jsON 或 websocket 流）都必须：用 JS 解析时间戳和内容 → 创建
常见错误现象：video.play() 调用成功但弹幕没动，其实是忘了启动弹幕渲染循环（比如没调 requestAnimationFrame 或没绑定 timeupdate 事件）。
- 推荐用绝对定位的 层叠在
上，兼容性好、调试直观- 高密度弹幕（>100 条/秒）建议切到
渲染，否则 dom 操作会卡顿- 务必监听
video.ontimeupdate或video.addEventListener('timeupdate', ...)，不能靠setInterval模拟时间play()失败时弹幕更不会动——先过自动播放策略关现代浏览器（chrome、safari、edge）对
video.play()有严格限制：无用户手势（如 click/tap）触发时，静音视频才可能自动播放；带声音的视频必须由用户交互显式调起。如果play()报错DOMException: play() failed because the user didn't interact with the document first，那后续所有逻辑（包括弹幕初始化）大概率被阻断。立即学习“前端免费学习笔记（深入）”；
- 确保首次调用
video.play()在 button click、touchstart 等事件回调中 - 若需静默启动，提前设置
video.muted = true和video.autoplay = true - 不要在
DOMContentLoaded里直接play()，此时用户还没点屏幕
弹幕数据怎么喂给播放器？别硬塞进
src没有标准属性能让
自动加载弹幕。弹幕文件（如barrage.json）必须单独请求，等video加载完成（loadedmetadata或canplay事件后）再解析并挂载渲染逻辑。示例关键流程：
video.addEventListener('canplay', () => { fetch('barrage.json') .then(r => r.json()) .then(data => { initDanmakuLayer(video, data); // 自定义函数：创建容器、绑定 timeupdate、启动渲染 }); });- 避免在
play()调用前就解析弹幕数据——视频时长未知，无法对齐时间轴 - 弹幕时间戳单位通常是秒（如
{time: 12.34, text: "666"}），需与video.currentTime直接比对 - 移动端要注意
video.webkitEnterFullscreen()后 DOM 层级变化，弹幕容器可能被遮挡
真正麻烦的从来不是怎么让字飞过去，而是怎么让每条弹幕在正确的时间、以正确的速度、不重叠不卡顿地飞过去——这需要你精确控制帧节奏、内存回收和 DOM 生命周期。别指望一个
play()调用能替你做完这些。 - 高密度弹幕（>100 条/秒）建议切到