怎么实现JS弹幕的暂停、点击跳转与关键词屏蔽

系统解析移动弹幕的生命周期管控、动力学位移冻结、DOM 事件委托与安全白名单跳转，打造兼顾高性能与交互可控的视频弹幕系统。

在视频播放与直播互动的业务场景中，弹幕早已脱离了单纯的文字滚动走马灯，演变为了承载知识点注解、互动投票以及跳转导航的核心界面元素。但在很多初版实现中，开发者常常面临三大典型痛点：弹幕匀速飞驰，用户刚想仔细看却已滑出视口，无法悬停暂歇；弹幕虽然带有链接或定位属性，却由于高频位移导致点击判定飘忽、甚至误触到底层视频播放器；更严重的是，一旦未经前端及时净化，恶意违禁词与广告刷屏会瞬间破坏用户视听体验。

解决这些问题的关键，在于将弹幕从“无序的视觉动画”转变为“具备生命周期与状态机的受控对象”。本文将针对“暂停控制”、“点击与跳转”以及“关键词屏蔽”这三项核心能力，逐一拆解其底层原理、数学模型与工程实现步骤，并提供一套完整、无第三方依赖且开箱即用的技术方案。

一、弹幕核心管道架构与数据模型

实现上述功能的前提，是为每条弹幕建立清晰的数据模型与统一的流转管道。传统将字符串直接插入 DOM 的做法无法应对复杂的交互状态。一条健壮的弹幕实体应当具备文本内容、发射时刻、渲染轨道、运动速度以及业务交互载荷（Payload）。

如架构图所示，一条弹幕在进入屏幕前必须先后经历三个核心阶段：

1. 文本净化阶段（Filter Gate）：接收原始弹幕数据，经由关键词审查算法（DFA/正则）判定是直接静默丢弃，还是将违禁词替换为掩码字符。
2. 排版与轨道调度（Track Manager）：计算文本测量宽度，检索当前屏幕内无文字重叠风险的空闲轨道，分配垂直坐标 top 与初始水平坐标 left。
3. 渲染与状态监听（Render & Interaction）：将格式化后的节点挂载至舞台容器，绑定状态监听器。此时，动画引擎负责推进位移，交互层接管鼠标悬停、全局暂停以及点击跳转行为。

二、关键词屏蔽功能的实现策略与算法

前端关键词过滤的核心诉求是“低延迟”与“防绕过”。在实时弹幕流中，如果每条弹幕都使用大量正则表达式遍历比对，当弹幕并发量较大且敏感词库超过几千条时，主线程很容易产生卡顿，导致视频掉帧。

为此，行业通用的最优解是基于确定性有限状态自动机（DFA，Deterministic Finite Automaton）构建敏感词前缀字典树。DFA 算法的核心优势在于：匹配过程的时间复杂度只与待检测文本的字符长度 n 有关，而与词库体量 m 完全解耦，非常适合浏览器前端运行。

1. 构建 DFA 敏感词字典树

我们将敏感词数组转化为多层嵌套的 JavaScript 对象结构，在每个词的结尾节点打上 isEnd = true 标记。构建代码如下：

/**
 * DFA 敏感词过滤器
 */
class DanmakuFilter {
  constructor(keywordList = []) {
    this.root = {};
    this.buildTree(keywordList);
  }

  // 构建字典树
  buildTree(keywords) {
    this.root = {};
    for (const word of keywords) {
      const cleanWord = word.trim().toLowerCase();
      if (!cleanWord) continue;
      
      let node = this.root;
      for (let i = 0; i < cleanWord.length; i++) {
        const char = cleanWord[i];
        if (!node[char]) {
          node[char] = { isEnd: false };
        }
        node = node[char];
      }
      node.isEnd = true;
    }
  }

  // 检测是否包含敏感词
  hasSensitiveWord(text) {
    const cleanText = text.toLowerCase();
    for (let i = 0; i < cleanText.length; i++) {
      let node = this.root;
      for (let j = i; j < cleanText.length; j++) {
        const char = cleanText[j];
        if (!node[char]) break;
        if (node[char].isEnd) return true;
        node = node[char];
      }
    }
    return false;
  }

  // 掩码替换敏感词
  mask(text, replaceChar = '*') {
    const cleanText = text.toLowerCase();
    const chars = text.split('');
    let i = 0;

    while (i < cleanText.length) {
      let node = this.root;
      let matchLen = 0;
      let foundEnd = false;

      for (let j = i; j < cleanText.length; j++) {
        const char = cleanText[j];
        if (!node[char]) break;
        if (node[char].isEnd) {
          matchLen = j - i + 1;
          foundEnd = true;
        }
        node = node[char];
      }

      if (foundEnd && matchLen > 0) {
        for (let k = i; k < i + matchLen; k++) {
          chars[k] = replaceChar;
        }
        i += matchLen;
      } else {
        i++;
      }
    }
    return chars.join('');
  }
}

三、弹幕暂停与恢复的两种实现机制

弹幕的暂停控制分为两类场景：一是单条悬停暂停（用户鼠标移入某条弹幕，该弹幕停在当前位置，移出后继续前进）；二是全局播放器联动暂停（用户暂停视频或点击播放器暂停按钮时，视口内所有活跃弹幕全部静止）。

1. 方案一：CSS 动画与 animation-play-state（推荐优先选用）

在纯 DOM 渲染模式下，利用 CSS3 关键帧动画位移是性能最优的选择。现代浏览器的合成器线程可以直接接管 transform: translateX(...)，不需要频繁触发布局与重绘。

控制暂停只需要修改 CSS 属性：

/* 基础弹幕动画声明 */
@keyframes danmaku-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 100vw));
  }
}

.danmaku-item {
  position: absolute;
  white-space: nowrap;
  left: 100%;
  will-change: transform;
  animation-name: danmaku-slide;
  animation-timing-function: linear;
  cursor: pointer;
}

/* 单条鼠标悬停暂停：单行 CSS 即可由浏览器合成器精准锁定 */
.danmaku-item:hover {
  animation-play-state: paused !important;
  z-index: 999;
  box-shadow: 0 0 10px rgba(119, 185, 174, 0.6);
}

/* 全局暂停容器类：当父舞台带有 is-paused 类时，全量冻结 */
.danmaku-stage.is-paused .danmaku-item {
  animation-play-state: paused;
}

2. 方案二：JavaScript requestAnimationFrame 帧级时间差补偿

如果业务需求较为复杂，例如需要随时动态改变弹幕行进速度、计算多弹幕物理碰撞、或使用 HTML5 Canvas 绘制，则必须采用 JavaScript 自行驱动的位移循环。其核心数学模型如下：

// 每一帧在 rAF 中计算当前真实 X 坐标
update(timestamp) {
  if (this.isPaused) return;

  // 累加本次因暂停产生的总延迟，消除恢复后的跳帧突变
  if (this.lastPauseStart) {
    this.totalPausedDuration += (timestamp - this.lastPauseStart);
    this.lastPauseStart = null;
  }

  const activeTime = timestamp - this.startTime - this.totalPausedDuration;
  const currentX = this.stageWidth - (activeTime * this.speed);
  this.element.style.transform = `translateX(${currentX}px)`;
}

四、弹幕点击判定与跳转实现

处于高速移动中的弹幕元素，点击交互往往存在两个工程陷阱：一是高速移动导致指针松开时坐标与按下时发生漂移，产生误触；二是点击弹幕时事件冒泡到底层 <video>，反而触发了播放器的“暂停/播放”切换。

1. 事件委托与防穿透处理

不要为成百上千个弹幕 DOM 分别绑定 addEventListener，这会导致严重的内存占用和垃圾回收停顿。应在整个弹幕容器 .danmaku-stage 上绑定单个点击监听器，利用 e.target.closest('.danmaku-item') 精准锁定被击中的弹幕。

2. 数据载荷与安全跳转

弹幕跳转通常有两种形态：

• 视频内部寻道（Seek）：点击例如“02:15 处高能”的弹幕，播放器直接跳跃到目标时间戳。
• 外部超链接跳转：点击引导卡片或相关参考链接，弹出新窗口。对于外链必须进行协议安全校验（仅允许 http/https）以及域名白名单过滤，并强制添加 rel="noopener noreferrer" 防止反向控制。

// 弹幕舞台统一点击处理
stageElement.addEventListener('click', (event) => {
  const item = event.target.closest('.danmaku-item');
  if (!item) return;

  // 阻止事件继续向上传播至视频播放器，避免误触发播放/暂停
  event.stopPropagation();
  event.preventDefault();

  const { action, time, url } = item.dataset;

  // 分支 1：视频进度跳转
  if (action === 'seek' && time) {
    const targetSeconds = parseFloat(time);
    if (!isNaN(targetSeconds) && videoPlayer) {
      videoPlayer.currentTime = targetSeconds;
      console.log(`[弹幕导航] 跳转至视频时间点: ${targetSeconds} 秒`);
    }
  }

  // 分支 2：外部链接跳转（安全过滤）
  if (action === 'link' && url) {
    try {
      const parsedUrl = new URL(url, window.location.origin);
      // 安全限制：只允许安全协议
      if (parsedUrl.protocol === 'http:' || parsedUrl.protocol === 'https:') {
        // 可视业务需求增加域名白名单校验
        window.open(parsedUrl.href, '_blank', 'noopener,noreferrer');
      } else {
        console.warn('[弹幕导航] 拦截到不合规协议链接:', url);
      }
    } catch (err) {
      console.error('[弹幕导航] 非法URL格式:', err);
    }
  }
});

五、完整可运行的弹幕组件实操代码

为了让读者能够完整复现上述功能，下面提供一个整洁、高内聚的完整实现，涵盖DFA 敏感词过滤、多轨道自动分配、CSS 悬停暂停、全局联动暂停与点击跳转全套逻辑：

/**
 * 完整弹幕管理器实现
 */
class DanmakuEngine {
  constructor(options) {
    this.stage = options.stage;
    this.video = options.video;
    this.trackHeight = options.trackHeight || 36;
    this.tracks = []; // 记录各轨道的可用时间戳
    this.filter = new DanmakuFilter(options.sensitiveWords || []);
    
    this.init();
  }

  init() {
    this.initTracks();
    this.bindEvents();
  }

  // 根据舞台高度划分固定行距轨道
  initTracks() {
    const stageHeight = this.stage.clientHeight || 400;
    const trackCount = Math.floor(stageHeight / this.trackHeight);
    this.tracks = new Array(trackCount).fill(0);
  }

  // 绑定全局事件
  bindEvents() {
    // 1. 播放器全局暂停联动
    if (this.video) {
      this.video.addEventListener('pause', () => {
        this.stage.classList.add('is-paused');
      });
      this.video.addEventListener('play', () => {
        this.stage.classList.remove('is-paused');
      });
    }

    // 2. 事件委托捕获点击
    this.stage.addEventListener('click', (e) => {
      const item = e.target.closest('.danmaku-item');
      if (!item) return;

      e.stopPropagation();
      e.preventDefault();

      const { action, time, url } = item.dataset;
      if (action === 'seek' && time && this.video) {
        this.video.currentTime = parseFloat(time);
      } else if (action === 'link' && url) {
        window.open(url, '_blank', 'noopener,noreferrer');
      }
    });
  }

  // 发射单条弹幕
  emit(data) {
    // 步骤 1：关键词屏蔽审查
    if (data.blockForbidden && this.filter.hasSensitiveWord(data.text)) {
      console.info('[弹幕拦截] 命中禁词，丢弃渲染:', data.text);
      return false;
    }
    const cleanText = this.filter.mask(data.text);

    // 步骤 2：分配轨道，防止垂直重叠
    const now = Date.now();
    let selectedTrack = -1;
    for (let i = 0; i < this.tracks.length; i++) {
      if (this.tracks[i] <= now) {
        selectedTrack = i;
        break;
      }
    }
    if (selectedTrack === -1) {
      selectedTrack = Math.floor(Math.random() * this.tracks.length);
    }

    const duration = data.duration || 6; // 6秒滑过全屏
    // 预估该轨道占用到何时才允许下一条同速弹幕进入
    this.tracks[selectedTrack] = now + 1500; 

    // 步骤 3：构建 DOM 节点
    const el = document.createElement('div');
    el.className = 'danmaku-item';
    el.textContent = cleanText;
    el.style.top = `${selectedTrack * this.trackHeight + 8}px`;
    el.style.animationDuration = `${duration}s`;

    if (data.color) el.style.color = data.color;

    // 注入业务跳转数据
    if (data.action) {
      el.dataset.action = data.action;
      if (data.time) el.dataset.time = data.time;
      if (data.url) el.dataset.url = data.url;
      el.classList.add('has-action');
    }

    // 步骤 4：挂载与生命周期回收
    this.stage.appendChild(el);
    el.addEventListener('animationend', () => {
      el.remove();
    }, { once: true });

    return true;
  }
}

六、常见问题排查与关键避坑指南

在将上述方案投入真实项目运行时，开发者往往会遇到以下典型工程边界问题，请对照排查：

1. 鼠标悬停暂停时文字抖动或重排

原因：在 .danmaku-item:hover 中修改了 border、font-size 或 padding 等几何属性，导致浏览器触发整个弹幕容器的 Layout（重排）。
解决方法：悬停视觉效果严格限制在 box-shadow、outline、background-color 或 filter 等仅触发 Composite（合成）的属性上，且确保声明 will-change: transform;。

2. 弹幕层遮挡视频右键菜单与控制栏

原因：弹幕容器 .danmaku-stage 覆盖在视频上方时，如果不加处理，透明区域也会吞噬所有鼠标事件，导致用户无法双击视频全屏或调节音量进度。
解决方法：给舞台容器设置 pointer-events: none;，同时对具体的弹幕子元素设置 pointer-events: auto;。这样既能穿透空白区域操作底层视频，又能准确响应弹幕的悬停与点击。

.danmaku-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 关键：穿透空白区域 */
  overflow: hidden;
}

.danmaku-item {
  pointer-events: auto; /* 关键：弹幕本身恢复交互捕获 */
}

3. 敏感词热更新与内存优化

在直播场景中，敏感词库往往会随运营策略实时推送到前端。如果每次都重新 new DanmakuFilter，旧字典树在垃圾回收前可能占用双倍内存。优化方式是提供 filter.insertKeywords(newWords) 增量插入接口，仅在原地扩展树节点，避免全量重建。

七、总结

实现一套体验流畅、可控性强的 JS 弹幕系统，关键在于职责的明确分层：

• 安全性（关键词屏蔽）：前置在数据管道入口，通过 DFA 敏感词树在 O(n) 复杂度内完成精准拦截与脱敏，保护业务体验与渲染主线程。
• 动力学（暂停与恢复）：善用 CSS animation-play-state，将悬停和全局暂停交给浏览器合成层处理，获得最顶级的帧率表现；需要精细控制时再选用 rAF 时间差模型。
• 交互性（点击与跳转）：通过事件委托、pointer-events 分层与 dataset 状态机，兼顾捕获命中率与播放器防穿透，配合协议过滤确保跳转安全。

掌握以上三个维度的配合，便能为现代 Web 播放器构筑坚实、稳定且功能丰富的互动弹幕体验。