1. Python技术站首页
  2. 其他
  3. JavaScript

javascript实现视频弹幕效果(两个版本)

• JavaScript

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>

4. 结语

通过以上两个版本的实现方式，我们可以更好地理解和使用JavaScript实现弹幕效果的相关方法。不同的实现方法适用于不同的场景，我们可以根据实际需求选择合适的技术实现。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript实现视频弹幕效果(两个版本) - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • AngularJS入门教程之表单校验用法示例

    AngularJS是一款非常流行的前端JavaScript框架，它为Web应用程序提供了许多现代化且强大的功能，其中包括表单校验。本文将介绍如何使用AngularJS来实现表单校验，并提供两个示例供参考。 目录 AngularJS表单校验介绍 AngularJS表单校验示例 自定义校验器 结论 AngularJS表单校验介绍 AngularJS提供了内置的表…

    JavaScript 2023年6月10日
    00

  • Ajax异步获取html数据中包含js方法无效的解决方法

    问题： 当使用Ajax异步获取html数据时，如果该html页面中包含有JavaScript方法，那么在获取到该html数据后，这些JavaScript方法可能会无效。这种情况一般是由于js方法未能正常被解析执行，导致无法执行相应的功能。 解决方法： eval()函数 可以使用eval()函数手动执行JavaScript代码，从而使得获取的html文档中的J…

    JavaScript 2023年6月11日
    00

  • JavaScript之promise_动力节点Java学院整理

    关于JavaScript中的Promise，我们可以从以下几个方面来介绍： 一、Promise概述 Promise是一种异步编程的解决方案，简单来说就是用更优雅的方式解决回调地狱的问题。根据MDN的定义，Promise是一个代表了一个异步操作最终完成或者失败的对象。 二、Promise三种状态 Promise有三种状态：pending（进行中）、fulfil…

    JavaScript 2023年5月28日
    00

  • JavaScript浅层克隆与深度克隆示例详解

    下面是详细讲解“JavaScript浅层克隆与深度克隆示例详解”的完整攻略。 什么是克隆？ 在 JavaScript 中，克隆是指将一个对象（或数组）的所有属性（或元素）复制到另一个对象（或数组）中。克隆的主要目的是防止对原对象的修改影响到其他对象。在一些特定的场景下，克隆还可以用于混淆对象结构以保证数据的安全性。 JavaScript 中的克隆分为两种：浅…

    JavaScript 2023年6月10日
    00

  • javaScript 数值型和字符串型之间的转换

    JavaScript中的数值型和字符串型之间的转换是一种常见的操作，以下是该过程的详细攻略： 将数值型转换为字符串型 将数值型转换为字符串型通常使用toString()方法，该方法可以将任意类型的数据转换为字符串，例如： let num = 123; // 定义一个数值型变量 let str = num.toString(); // 将数值型变量转换为字符串…

    JavaScript 2023年5月28日
    00

  • JQuery记住用户名密码实现下次自动登录功能

    JQuery记住用户名密码实现下次自动登录功能 在一些需要登录的网站中，用户可能需要输入用户名和密码登录。如果用户勾选了“记住我”的功能，下次再登录时就可以实现自动登录的功能。本文将介绍如何使用 JQuery 实现这一功能。 1. 使用cookie记录用户名密码 要实现自动登录的功能，需要记录用户的用户名和密码。可以使用 cookie 来保存这些信息。 //…

    JavaScript 2023年6月11日
    00

  • 浅谈String.valueOf()方法的使用

    当我们需要将其他类型的数据转换为字符串时，就会用到Java中的valueOf()方法。String类提供了一个静态的valueOf()方法，可以接受多种类型的参数，并将其转换为字符串类型。本文将详细讲解String类的valueOf()方法的使用方法。 String.valueOf()方法的语法 String类的valueOf()方法具有以下语法： publ…

    JavaScript 2023年6月10日
    00

  • 详谈js对url进行编码和解码(三种方式的区别)

    详谈js对URL进行编码和解码(三种方式的区别) 在JavaScript中，我们经常需要对URL进行编码和解码。比如在发送ajax请求时，如果URL中含有特殊字符，需要先对它进行编码后再发送请求；在处理查询字符串时，需要将编码后的字符串解码成可读的字符串。 JavaScript提供了三种方法来对URL进行编码和解码，包括encodeURI/decodeURI…

    JavaScript 2023年5月20日
    00
合作推广
合作推广
分享本页
返回顶部