Javascript实现视频弹幕效果攻略

1. 引言

弹幕是指用户在观看视频时，能够发送一些评论消息，这些评论消息会以滚动、飘动、静态等形式浮现在视频画面上方。在现在各大视频平台上，弹幕已成为视频观看的一种重要要素。

本篇攻略将从两个版本的弹幕效果的具体实现入手，来详细讲解JavaScript实现弹幕效果的过程。

2. 版本一

2.1 函数封装

本案例中主要使用了JavaScript来实现弹幕的效果。首先我们可以通过定义一个弹幕函数来实现弹幕的滚动效果。

/**
 * [danmu 动态弹幕]
 * @param  {[string]} text  [文字]
 * @param  {[number]} size  [文字大小]
 * @param  {[string]} color [文字颜色]
 * @return {[object]}       [返回弹幕节点]
 */
function danmu(text, size, color) {
  // 创建一个div标签，用于存放弹幕
  const div = document.createElement('div');
  div.style.position = 'fixed';
  div.style.whiteSpace = 'nowrap';
  div.innerText = text;
  div.style.fontSize = size + 'px';
  div.style.color = color;
  // 将弹幕div节点放入DOM中
  document.body.appendChild(div);
  // 返回该弹幕节点对象
  return div;
}

该函数中传入三个参数，分别为文字、文字大小和文字颜色，并返回一个弹幕节点。

2.2 发送弹幕

我们可以通过JS实现一个弹幕发送器，可以在键盘事件中监听输入的内容，用户输入文字后可以通过该函数向弹幕画面添加弹幕。

/**
 * [sendDanmu 发送弹幕]
 * @return {[type]} [description]
 */
function sendDanmu() {
  // 获取input框
  const input = document.querySelector('input');
  // 获取input框中的value值
  const text = input.value;
  // 清空input框中的value值
  input.value = '';
  // 随机设置文字大小和颜色
  const size = Math.floor(Math.random() * 40 + 20);
  const color = `rgb(${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)})`;
  // 调用danmu函数创建弹幕节点
  const node = danmu(text, size, color);
  // 设置初始位置
  node.style.top = Math.floor(Math.random() * (window.innerHeight - node.offsetHeight)) + 'px';
  // 设置弹幕移动速度，移动速度越快表示飞的越快
  const speed = Math.floor(Math.random() * 10 + 5);
  // 设置弹幕的动画
  const animate = node.animate([
    { 
      transform: `translateX(${window.innerWidth}px)` 
    },
    { 
      transform: `translateX(-${node.offsetWidth}px)` 
    }
  ], speed * 1000);
  // 监听动画结束事件，在动画结束后从DOM节点中删除
  animate.addEventListener('finish', () => {
    node.parentNode.removeChild(node);
  });
}

2.3 示例

在上述弹幕发送器的基础上，我们可以实现一个简单的弹幕示例。用户在输入框中输入文字后，点击发送，所输入的文字会出现在屏幕上方，以滚动的方式从右往左飘出。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Danmu Demo1</title>
  </head>
  <body>
    <input type="text" onkeydown="if(event.keyCode===13) sendDanmu()">
    <button onclick="sendDanmu()">发送</button>
    <script>
      /**
       * [danmu 动态弹幕]
       * @param  {[string]} text  [文字]
       * @param  {[number]} size  [文字大小]
       * @param  {[string]} color [文字颜色]
       * @return {[object]}       [返回弹幕节点]
       */
      function danmu(text, size, color) {
        // 创建一个div标签，用于存放弹幕
        const div = document.createElement('div');
        div.style.position = 'fixed';
        div.style.whiteSpace = 'nowrap';
        div.innerText = text;
        div.style.fontSize = size + 'px';
        div.style.color = color;
        // 将弹幕div节点放入DOM中
        document.body.appendChild(div);
        // 返回该弹幕节点对象
        return div;
      }

      /**
       * [sendDanmu 发送弹幕]
       * @return {[type]} [description]
       */
      function sendDanmu() {
        // 获取input框
        const input = document.querySelector('input');
        // 获取input框中的value值
        const text = input.value;
        // 清空input框中的value值
        input.value = '';
        // 随机设置文字大小和颜色
        const size = Math.floor(Math.random() * 40 + 20);
        const color = `rgb(${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)})`;
        // 调用danmu函数创建弹幕节点
        const node = danmu(text, size, color);
        // 设置初始位置
        node.style.top = Math.floor(Math.random() * (window.innerHeight - node.offsetHeight)) + 'px';
        // 设置弹幕移动速度，移动速度越快表示飞的越快
        const speed = Math.floor(Math.random() * 10 + 5);
        // 设置弹幕的动画
        const animate = node.animate([
          { 
            transform: `translateX(${window.innerWidth}px)` 
          },
          { 
            transform: `translateX(-${node.offsetWidth}px)` 
          }
        ], speed * 1000);
        // 监听动画结束事件，在动画结束后从DOM节点中删除
        animate.addEventListener('finish', () => {
          node.parentNode.removeChild(node);
        });
      }
    </script>
  </body>
</html>

3. 版本二

3.1 函数封装

除了可以实现上述弹幕的简单示例外，我们还可以使用Canvas来实现更复杂的弹幕效果。在这种情况下，我们需要使用JavaScript的canvas绘图技术来绘制弹幕，可以将以下函数用于创建画布和绘制弹幕。

/**
 * [createCanvas 创建画布]
 * @return {[object]} [canvas对象]
 */
function createCanvas() {
  // 创建canvas节点
  const canvas = document.createElement('canvas');
  // 设置canvas宽高和样式
  canvas.setAttribute('width', window.innerWidth);
  canvas.setAttribute('height', window.innerHeight);
  canvas.style.position = 'fixed';
  canvas.style.top = '0';
  canvas.style.left = '0';
  canvas.style.zIndex = '100';
  // 将canvas节点插入到DOM中
  document.body.appendChild(canvas);
  // 返回canvas对象
  return canvas;
}

/**
 * [danmuCanvas 动态弹幕画布]
 * @param  {[string]} text  [文字]
 * @param  {[number]} size  [文字大小]
 * @param  {[string]} color [文字颜色]
 */
function danmuCanvas(text, size, color) {
  this.text = text;
  this.size = size;
  this.color = color;
  // 获取canvas窗口宽度和高度
  const canvasWidth = canvas.width;
  const canvasHeight = canvas.height;
  // 设置初始位置
  this.x = canvasWidth;
  this.y = Math.floor(Math.random() * (canvasHeight - size));
  // 设置弹幕移动速度，移动速度越快表示飞的越快
  const speed = Math.floor(Math.random() * 10 + 5);
  // 绘制弹幕
  this.draw = function() {
    // 获取canvas上下文
    const context = canvas.getContext('2d');
    // 设置字体大小和颜色
    context.font = size + 'px sans-serif';
    context.fillStyle = color;
    // 绘制弹幕文字
    context.fillText(text, this.x, this.y);
  };
  // 更新弹幕位置
  this.update = function() {
    this.x -= speed;
    // 判断弹幕是否超出屏幕
    if (this.x < -canvasWidth) {
      removeDanmu(this);
    }
  };
}

3.2 发送弹幕

我们可以通过点击事件调用该函数，来向画布中添加弹幕。

/**
 * [sendDanmuCanvas 发送弹幕画布]
 * @return {[type]} [description]
 */
function sendDanmuCanvas() {
  // 获取input框
  const input = document.querySelector('input');
  // 获取input框中的value值
  const text = input.value;
  // 清空input框中的value值
  input.value = '';
  // 随机设置文字大小和颜色
  const size = Math.floor(Math.random() * 40 + 20);
  const color = `rgb(${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)})`;
  // 创建一条弹幕
  const danmu = new danmuCanvas(text, size, color);
  // 将弹幕放入弹幕数组中
  danmus.push(danmu);
}

3.3 示例

在该版本中，我们需要一个canvas标签来作为弹幕画布，可以通过以下代码实现。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Danmu Demo2</title>
  </head>
  <body>
    <input type="text" onkeydown="if(event.keyCode===13) sendDanmuCanvas()">
    <button onclick="sendDanmuCanvas()">发送</button>
    <canvas></canvas>
    <script>
      let canvas = createCanvas();
      let danmus = [];
      /**
       * [createCanvas 创建画布]
       * @return {[object]} [canvas对象]
       */
      function createCanvas() {
        // 创建canvas节点
        const canvas = document.createElement('canvas');
        // 设置canvas宽高和样式
        canvas.setAttribute('width', window.innerWidth);
        canvas.setAttribute('height', window.innerHeight);
        canvas.style.position = 'fixed';
        canvas.style.top = '0';
        canvas.style.left = '0';
        canvas.style.zIndex = '100';
        // 将canvas节点插入到DOM中
        document.body.appendChild(canvas);
        // 返回canvas对象
        return canvas;
      }

      /**
       * [removeDanmu 删除弹幕]
       * @param  {[object]} danmu [弹幕对象]
       */
      function removeDanmu(danmu) {
        danmus.splice(danmus.indexOf(danmu), 1);
      }

      /**
       * [danmuCanvas 动态弹幕画布]
       * @param  {[string]} text  [文字]
       * @param  {[number]} size  [文字大小]
       * @param  {[string]} color [文字颜色]
       */
      function danmuCanvas(text, size, color) {
        this.text = text;
        this.size = size;
        this.color = color;
        // 获取canvas窗口宽度和高度
        const canvasWidth = canvas.width;
        const canvasHeight = canvas.height;
        // 设置初始位置
        this.x = canvasWidth;
        this.y = Math.floor(Math.random() * (canvasHeight - size));
        // 设置弹幕移动速度，移动速度越快表示飞的越快
        const speed = Math.floor(Math.random() * 10 + 5);
        // 绘制弹幕
        this.draw = function() {
          // 获取canvas上下文
          const context = canvas.getContext('2d');
          // 设置字体大小和颜色
          context.font = size + 'px sans-serif';
          context.fillStyle = color;
          // 绘制弹幕文字
          context.fillText(text, this.x, this.y);
        };
        // 更新弹幕位置
        this.update = function() {
          this.x -= speed;
          // 判断弹幕是否超出屏幕
          if (this.x < -canvasWidth) {
            removeDanmu(this);
          }
        };
      }

      /**
       * [sendDanmuCanvas 发送弹幕画布]
       * @return {[type]} [description]
       */
      function sendDanmuCanvas() {
        // 获取input框
        const input = document.querySelector('input');
        // 获取input框中的value值
        const text = input.value;
        // 清空input框中的value值
        input.value = '';
        // 随机设置文字大小和颜色
        const size = Math.floor(Math.random() * 40 + 20);
        const color = `rgb(${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)})`;
        // 创建一条弹幕
        const danmu = new danmuCanvas(text, size, color);
        // 将弹幕放入弹幕数组中
        danmus.push(danmu);
      }

      /**
       * [drawDanmuCanvas 绘制弹幕画布]
       */
      function drawDanmuCanvas() {
        // 获取canvas上下文
        const context = canvas.getContext('2d');
        // 清空画布
        context.clearRect(0, 0, canvas.width, canvas.height);
        // 绘制所有弹幕
        danmus.forEach((danmu) => {
          danmu.draw();
          danmu.update();
        });
        // 将所有弹幕更新后，延迟一段时间后再次调用该函数
        setTimeout(drawDanmuCanvas, 16);
      }
      // 调用drawDanmuCanvas函数，开始绘制弹幕画布
      drawDanmuCanvas();
    </script>
  </body>
</html>