<track>标签无法实现弹幕功能，因其仅支持静态文本轨道且无DOM控制权；弹幕必须通过canvas+requestAnimationFrame动态渲染，并手动管理生命周期。
track 标签根本不能实现弹幕功能
<track> 是 HTML5 中用于提供视频/音频字幕、章节、描述等**静态文本轨道**的标签，它只支持 WebVTT 或 TTML 格式，且浏览器按时间戳自动渲染——没有 DOM 控制权、不支持动态插入、无法响应用户实时输入。想用 <track> 做弹幕，会直接失败。
弹幕必须用 canvas + requestAnimationFrame 实现
真实弹幕是大量带位置、速度、透明度、颜色的 DOM 元素（或更优的 <canvas> 绘制）在视频画面上层实时运动。关键点：
- 视频容器需设
position: relative，弹幕层用position: absolute覆盖其上 - 每条弹幕是一个
<div>或 canvas 上的一个绘制文本，y 坐标固定，x 坐标随帧动画递减（从右向左飞） - 用
requestAnimationFrame驱动，避免setTimeout丢帧；每帧更新所有活跃弹幕的left值或 canvas 坐标 - 需手动管理生命周期：超出左边界就
remove()，避免 DOM 泄漏
示例核心逻辑：
function createDanmaku(text) {
const el = document.createElement('div');
el.className = 'danmaku';
el.textContent = text;
el.style.left = `${window.innerWidth}px`;
el.style.top = `${Math.random() * 200 + 50}px`;
danmakuContainer.appendChild(el);
<p>function animate() {
const left = parseInt(el.style.left) - 2;
if (left < -el.offsetWidth) {
el.remove();
return;
}
el.style.left = <code>${left}px</code>;
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
}WebVTT 文件里写“弹幕”只是自欺欺人
有人把弹幕时间点硬塞进 WebVTT，比如：
立即学习“前端免费学习笔记（深入）”；
WEBVTT
<p>00:00:01.000 --> 00:00:03.000
[{"text":"哈哈哈","x":80,"y":120}]</p><p>00:00:02.500 --> 00:00:04.500
[{"text":"前方高能","x":70,"y":200}]这完全无效：<track kind="subtitles"> 只解析纯文本行，JSON 字符串会被当普通字幕显示成乱码，更不会触发任何 JS 解析逻辑。浏览器不执行其中任何代码，也不暴露原始 cue 数据供你读取——除非你手动 fetch 并解析 VTT 内容，那跟 <track> 已经毫无关系。
兼容性和性能卡点必须提前处理
真实项目中容易栽在三个地方：
- 移动端 touch 事件干扰：弹幕层需加
pointer-events: none，否则遮挡视频操作 - 大量弹幕时 layout thrashing：避免频繁读写
offsetWidth，改用getBoundingClientRect()缓存尺寸 - 不同浏览器对
video.requestPictureInPicture()的处理：画中画模式下 canvas 弹幕会消失，需监听enterpictureinpicture事件暂停渲染
真正可用的弹幕库（如 dplayer、Bilibili 的 flv.js 配套 danmaku）都绕开了 <track>，直接接管视频容器 DOM 和播放事件。别在语义标签上找捷径，弹幕是交互图形问题，不是字幕问题。
