y-danmu

基于Canvas的ESM模块化js弹幕插件

使用

引入

script引入

进入该地址，下载该文件到项目本地目录，然后直接按路径引用

npm方式

1. 确保安装了webpack和webpack-cli 没安装则使用以下命令： npm i webpack webpack-cli@3 -D
2. 安装: npm i y-danmu
3. 配置webpack.config.js，给库设置别名方便使用：

const {resolve} = require('path')
module.exports = {
    // ...
    resolve: {
    alias: {
      'y-danmu': resolve(__dirname, "node_modules/y-danmu/y-danmu.min.js"),
    },
  },
    // ...
}

开始

1. 添加Html结构：

    <div class="container">
      <div class="video-box">
        <canvas id="Y_danmu"></canvas>
        <video id="Y_video" src="./example/assets/movie.mp4" controls></video>
      </div>
      <div class="opt-box">
        <input
          type="text"
          class="danmu-input"
          id="Y_input"
          placeholder="发送弹幕见证当下吧！"
        />
        <button class="danmu-btn">咻！</button>
        <input type="color" class="danmu-color" />
        <div class="font-wrapper">
          <span>字体大小</span>
          <span>12</span>
          <input
            id="dm-font"
            type="range"
            max="28"
            min="12"
            step="1"
            value="16"
          />
          <span>28</span>
        </div>
        <div class="speed-wrapper">
          <span>速度</span>
          <span>慢</span>
          <input
            id="dm-speed"
            type="range"
            max="10"
            min="1"
            step="1"
            value="2"
          />
          <span>快</span>
        </div>
      </div>
    </div>

2. 引入样式

<link rel="stylesheet" href="你的项目根目录/node_modules/y-danmu/dist/index.css">

3. 使用$init方法实例化弹幕：

// videoDomId--视频标签<video>的id，
// canvasDomId--canvas标签<canvas>的id，
// danmuData--弹幕的元数据，即初始数据。例如：
//const danmuData = [
//        {
//          content: "还好还好", // 除content是必传参数其他可选
//          runTime: 3,
//          color: "blue",
//          speed: 2,
//          fontSize: 15,
//        }
    ]
$init(videoDomId, canvasDomId, danmuData)

4. 添加发射弹幕方法：

      const dmuIpt = document.querySelector("#Y_input"),
        dmBtn = document.querySelector(".danmu-btn"),
        dmColor = document.querySelector("input[type=color]");

      dmBtn.addEventListener("click", handleShootDanmuBtn, false);
      function handleShootDanmuBtn() {
        if (dmuIpt.value.trim() == "") return;
        // 发射弹幕
        window.videoDanmu.addDanmu({
          content: dmuIpt.value,
          color: dmColor.value,
          fontSize: dmFont.value,
          speed: dmSpeed.value,
        });
        dmuIpt.value = "";
      }

      const dmFont = document.querySelector("#dm-font");
      const dmSpeed = document.querySelector("#dm-speed");