Danmu.Js

概述

运用 danmu.js 可以方便地使用弹幕功能，满足任意 Web DOM 元素使用（包括 video）。弹幕实现了顶部居中、底部居中、彩色弹幕、无遮挡滚动（具体算法参考[前端算法之弹幕设计](https://segmentfault.com/a/1190000015722802)），以及其它常用的弹幕使用方式。

起步

1. 安装

   $ npm install danmu.js

2. 使用

• Step 1:

• Step 2:

  import DanmuJs from 'danmu.js'
  
  let danmujs = new DanmuJs({
    container: document.getElementById('vs'), //弹幕容器，该容器发生尺寸变化时会自动调整弹幕行为
    containerStyle: {
      //弹幕容器样式
      zIndex: 100
    },
    player: document.getElementsByTagName('video')[0], //配合音视频元素（video或audio）同步使用时需提供该项
    comments: [
      //弹幕预存数组,配合音视频元素（video或audio）同步使用时需提供该项
      {
        duration: 20000, //弹幕持续显示时间,毫秒(最低为5000毫秒)
        //moveV: 100, //弹幕匀速移动速度(单位: px/秒)，设置该项时duration无效
        id: '1', //弹幕id，需唯一
        start: 2000, //弹幕出现时间（毫秒）
        prior: true, //该条弹幕优先显示，默认false
        color: true, //该条弹幕为彩色弹幕，默认false
        txt: '长弹幕长弹幕长弹幕长弹幕长弹幕', //弹幕文字内容
        style: {
          //弹幕自定义样式
          color: '#ff9500',
          fontSize: '20px',
          padding: '2px 11px'
        },
        mode: 'top', //显示模式，top顶部居中，bottom底部居中，scroll滚动，默认为scroll
        like: {
          // 点赞相关参数
          el: likeDOM, // el 仅支持传入 dom
          style: {
            // el 绑定样式
            paddingLeft: '10px',
            color: '#ff0000'
          }
        }
        // el: DOM //直接传入一个自定义的DOM元素作为弹幕，使用该项的话会忽略所提供的txt和style
      }
    ],
    area: {
      //弹幕显示区域
      start: 0, //区域顶部到播放器顶部所占播放器高度的比例
      end: 1, //区域底部到播放器顶部所占播放器高度的比例
      lines: undefined // 弹幕虚拟轨道显示行数。当指定行数时，显示范围 start/end 不生效；当弹幕字体大小超过所需要的总虚拟轨道数时，弹幕也不会出现在轨道上，因此请设置好弹幕fontSize及影响弹幕高度的其他样式，让弹幕和轨道高度匹配
    },
    channelSize: 40, // 轨道大小
    mouseControl: true, // 打开鼠标控制, 打开后可监听到 bullet_hover 事件。danmu.on('bullet_hover', function (data) {})
    mouseControlPause: false, // 鼠标触摸暂停。mouseControl: true 生效
    //bOffset: 1000, // 可调节弹幕横向间隔（毫秒）
    def