Nondeterministic Postrequisite Metaprotocol

    chimee-plugin-danmu

    0.1.3 • Public • Published

    弹幕组件

    使用 css / canvas 实现弹幕

    安装使用

    1. 安装
    npm install chimee-plugin-danmu
    1. 使用
    import chimee from 'chimee';
    import chimeePluginDanmu from 'chimee-plugin-danmu';
     
    // 安装插件
    chimee.install(chimeeDanmu);
    const player = new chimee({
      // ...
      // 使用插件
      plugin: [
        chimeePluginDanmu.name
      ]
    });

    也可以在页面中引用 /lib/index.browser.js 然后在页面中使用 chimeePluginDanmu

    配置

    mode

    • 类型: String
    • 含义: 弹幕使用 canvas 还是 css 渲染
    • 默认: 'css'
    • 值: 'css' , 'canvas'

    lineHeight

    • 类型: Number
    • 含义: 弹幕道的高度
    • 默认: 30

    fontSize

    • 类型: Number | String
    • 含义: 字体大小 |(大号 big)/(小号/ small)
    • 默认值: big

    updateByVideo

    • 类型: Boolean
    • 含义: 弹幕是否与视频状态同步,视频播放/暂停状态对应弹幕的播放暂停
    • 默认: true, 默认是同步的
    • 值: true / false

    方法

    start

    • 作用: 弹幕开始
    • 类型: Function
    • 参数: 空
    • 返回: 空

    pause

    • 作用: 弹幕暂停
    • 类型: Function
    • 参数: 空
    • 返回: 空

    open

    • 作用: 打开弹幕
    • 类型: Function
    • 参数: 空
    • 返回: 空

    close

    • 作用: 关闭弹幕
    • 类型: Function
    • 参数: 空
    • 返回: 空

    changeMode

    • 作用: 切换弹幕渲染方式
    • 类型: Function
    • 参数: mode
      • 类型: String
      • 含义: 替换的模式, 可传 'css' 或者 'canvas' 不可以为空
    • 返回: 空

    sendMsg

    • 作用: 发送弹幕
    • 类型: Function
    • 参数: data
      • 类型: Object

        • text
          • 类型: String
          • 含义: 弹幕内容
        • mode
          • 类型: String
          • 含义: 弹幕展现方式(固定下方 top/ 固定上方bottom)/滚动弹幕(flow)
          • 默认值: flow
        • fontSize
          • 类型: Number | String
          • 含义: 字体大小 |(大号 big)/(小号/ small)
          • 默认值: big
        • color
          • 类型: String
          • 含义: 弹幕颜色
          • 默认值: #fff
        • speed
          • 类型: Number
          • 含义: 弹幕每 16ms 的一个步长
          • 默认值: 根据弹幕宽度计算 Math.pow(piece.width, 1 / 3) * 0.3
      • 含义: 替换的模式, 可传 'css' 或者 'canvas' 不可以为空

    • 返回: 空
      const defaultData = {
        text: '你真的很漂亮',
        mode: 'flow',
        fontSize: 'big',
        color: '#fff'
      };
     

    receiveData

    • 作用: 接受弹幕的初始数据
    • 类型: Function
    • 参数: data
      • 类型: Array
      • 含义: 初始化塞入的所有数据
    • 返回: 空

    事件

    danmuContextmenu

    • 作用:监听弹幕右键点击事件
    • 回调函数参数:
      • pieces:
        • 类型: Array
        • 含义: 位于这个位置的所有弹幕集合

    其他

    Q: 如何实现弹幕右键弹窗

    用户可以监听 danmuContextmenu 事件,拿到该点下面的所有弹幕,然后使用 chimee-plugin-pop 插件,来自己构造弹窗(原因:弹窗内容根据业务场景会有不同的定制情况)

    Install

    npm i chimee-plugin-danmu

    DownloadsWeekly Downloads

    18

    Version

    0.1.3

    License

    ISC

    Unpacked Size

    331 kB

    Total Files

    21

    Last publish

    Collaborators

    • gaoyiyi
    • huzunjie
    • songguangyu
    • toxicjohann
    • welefen
    • yandeqiang