基于 Vue.js 的弹幕交互组件

Demo： https://hellodigua.github.io/vue-danmaku

Live Demo： https://jsfiddle.net/hellodigua/j78h6429/99/

现已支持 vue3：vue3-danmaku

支持自定义样式和海量弹幕：

$ npm install vue-danmaku --save

<template>
  <vue-danmaku :danmus="danmus"></vue-danmaku>
</template>

<script>
import vueDanmaku from 'vue-danmaku'

export default {
  data() {
    return {
      danmus: ['danmu1', 'danmu2', 'danmu3', '...'],
    }
  },
}
</script>

• 注 1：channels 为 0，则轨道数为容器可容纳最高轨道数
• 注 2：danmus 初始化后如果为空，则 autoplay 失效。因此对于异步加载的弹幕数据，需要手动调用 this.$refs[refName].play() 进行播放
• 注 3：弹幕刷新频率为每隔多长时间插入一次弹幕

通过 this.$refs[refName] 调用

• 注 1： push 适用于非循环模式，add 适用于循环模式

如果你有自定义弹幕结构与样式的需求，你可以传入任意结构的对象并自己写内部样式。

<template>
  <vue-danmaku ref="danmaku" :danmus="danmus" use-slot loop :speeds="200" :channels="5">
    <!-- 弹幕插槽（vue 2.6.0 及以上版本可使用 v-slot:dm="{ index, danmu }"语法） -->
    <template slot="dm" slot-scope="{ index, danmu }">
      <div>{{ index }}{{ danmu.name }}：{{ danmu.text }}</div>
    </template>
    <!-- 容器插槽 -->
    <div></div>
  </vue-danmaku>
</template>

<script>
import vueDanmaku from 'vue-danmaku'

export default {
  data() {
    return {
      danmus: [{ avatar: 'http://a.com/a.jpg', name: 'a', text: 'aaa' }, { avatar: 'http://a.com/b.jpg', name: 'b', text: 'bbb' }, ...]
    }
  }
}
</script>

QQ 群：747809274

• 必须给 vue-danmaku 组件设置宽高才能正常使用

• feat: 新增参数 isSuspend (默认 false)，支持鼠标划过弹幕悬浮暂停
• fix: 修复可能存在的 iOS15 下部分机型可能会闪屏的 BUG

• feat: 循环模式下，同屏不允许出现相同弹幕
• feat: 默认颜色修改为灰色

• fix: 修复 iOS 部分版本下微信 webview 内打开可能发生闪屏的 BUG
• fix: 修复当弹幕播放完调用 add 无法正常播放的 BUG

• feat: 移除 setChannels，改为直传控制
• feat: 新增弹幕插入完毕事件和播放完成事件
• feat: 兼容弹幕数据被覆盖的情况
• fix: 修复弹幕轨道数计算不准的问题
• fix: 修复首次更新弹幕速度失效的问题

• fix: 修复初始化时弹幕容器宽度可能出错的 BUG

• speed 参数改为 speeds 参数，含义同样发生变化(主要是为了保证不同屏幕下弹幕移动速度相同)
  • speed: 弹幕经过屏幕的总时长
  • speeds: 弹幕每秒走过的像素距离

• 新增 extraStyle，可控制普通弹幕的样式

• 新增弹幕插入方法

• fix: 修复 iOS 下平移闪烁的问题

• fix: 修复使用默认 slot 报错的 BUG

为了后续版本的易用性，组件参数改为直传。前版本文档请点此查看

• 组件参数改为直传
• 部分代码重构

• 支持异步加载弹幕（备注：异步加载后应手动调用 play 方法）

• 支持随机轨道发送弹幕
• fix: 非循环模式，播放完成时不应当结束弹幕任务

• 支持自动播放
• 弹幕容器尺寸改变时，重新计算滚动距离

• 打包体积优化

Make Core Code Great Again

• 支持设置弹幕距离
• 支持设置弹幕刷新频率

• 支持弹幕插槽及对应样式优化

• fix: 修复 0.1.0 打包错误导致的无法下载

• 支持移动端播放

• 支持弹幕速度
• 支持弹幕字号
• 支持新增弹幕

• 支持弹幕暂停
• 支持轨道数控制
• 支持弹幕循环

Born in 2018.3.11

• 支持弹幕效果