关键在于弹幕层与video的协同控制：需用canvas动态渲染、javascript同步尺寸、websocket实时同步，并通过分轨道、限密度等策略保障体验。
用 HTML5 的 <video></video> 标签做支持弹幕发送与实时飘屏的直播间，关键不在 video 本身，而在于它和弹幕层的协同控制。video 只负责解码播放，弹幕必须独立渲染、时间对齐、动态调度，否则卡顿、错位、堆叠、遮挡全都会出现。高性能的核心是选对渲染方式（Canvas 优于 DOM）、控好生命周期、避开浏览器重排重绘陷阱。
弹幕层必须精准叠加在 video 上
容器设 position: relative，video 和弹幕载体（canvas 或 div）都用 position: absolute; top: 0; left: 0; 覆盖。不能只靠 width/height 写死数值——全屏、缩放、响应式时会错位。必须用 JavaScript 动态同步尺寸：
- 监听
resize和fullscreenchange事件，实时更新 canvas.width/canvas.height 或弹幕容器的 clientWidth/clientHeight - canvas 的
style.width和style.height设为100%，但实际绘制分辨率要等于 video 的video.videoWidth和video.videoHeight，避免模糊 - 弹幕容器（如
#barrage-layer）的pointer-events: none必须加上，否则鼠标无法点到视频控件
用 Canvas 渲染弹幕才能扛住高并发
DOM 方式每条弹幕建一个 <div>，百条以上就明显掉帧；Canvas 每帧清空重绘，CPU/GPU 负担可控，适合直播间动辄上千条/分钟的场景。<ul>
<li>获取上下文：<code>const ctx = canvas.getContext('2d');
text、color、size、speed（像素/帧）、time（触发时间点，单位秒）video.timeupdate，把当前时间匹配的弹幕推入活动队列；不匹配的暂存或丢弃requestAnimationFrame 驱动主循环：遍历队列，更新 x 坐标（x -= speed），调用 ctx.fillText() 绘制，超出左边界则从队列移除弹幕发送与实时同步靠 WebSocket，不是轮询
用户点击“发送”后，前端立即本地预览（提升感知速度），同时通过 WebSocket 将内容发往服务端；服务端广播给所有在线客户端，而不是靠前端定时拉取。
- 推荐用 Socket.IO 或原生 WebSocket，连接建立后保持长链，延迟可压到 200ms 内
- 服务端需校验敏感词、限频（如单用户 5 秒内最多 1 条）、打时间戳（带服务器时间，防客户端时间不准）
- 客户端收到新弹幕后，根据其
time字段决定是立刻显示，还是缓存等待视频播到对应时刻再激活 - 断网重连时，服务端应补发断连期间的弹幕快照（例如最近 30 秒），避免信息丢失
防堆叠、控密度、保体验的细节处理
真实直播间里，同一秒涌进几十条弹幕是常态，不做干预就会糊成一片。
- 分轨道：将弹幕区域垂直划分为 8–12 行，每条新弹幕随机分配一行（
y = row * lineHeight + offset），避免文字重叠 - 限密度：维护一个滑动窗口（如最近 2 秒内已显示弹幕数），超阈值（如 15 条）则丢弃新弹幕或降级为“滚动提示”文字
- 支持开关与样式：提供「关闭弹幕」按钮；允许用户选字体大小、颜色、透明度，设置存在 localStorage 中
- 暂停时弹幕冻结：监听
video.pause，暂停 requestAnimationFrame 循环；恢复播放时继续动画，不重播已飘过的弹幕
