介绍
danmaku.js 是一款优秀的 HTML5 视频弹幕插件，在 HTML5 视频中可以实现文字、图片、视频等物品的弹幕效果。它可以让您的视频更加生动、丰富，并且能够在屏幕上进行实时的弹幕交互。
安装 danmaku.js
在使用 danmaku.js 前，您需要在您的项目中引入此库。您可以使用以下命令进行安装：
npm install danmaku.js
或者您也可以在您的 HTML 文件中使用以下方式来引入 danmaku.js：
<script src="https://cdn.jsdelivr.net/npm/danmakujs/dist/danmaku.min.js"></script>
引入 danmaku.js
针对上述两种引入方式，我们需要完成以下步骤来引入 danmaku.js：
使用 ES6 导入方式：
import Danmaku from 'danmaku.js';
或者在全局使用的方式导入，例如：
const Danmaku = window.Danmaku;
使用 danmaku.js
初始化 danmaku.js
在使用 danmaku.js 之前，您需要进行以下初始化操作：
const danmaku = new Danmaku({
container: '#videoBox',
});这里，您需要注意的是，您需要指定要绑定 danmaku.js 的元素容器，并且您的视频也需要在该容器中才能实现弹幕功能。
除此之外，您还可以进行一些高级的初始化操作来实现更加个性化的弹幕效果，例如：
-- -------------------- ---- ------- ----- ------- - --- --------- ---------- ------------ --------- ----- ------ --- ------ ---- -------- ---- --------- --- ----------- ------- ----------- ---- ------- ----------- ---------- ---------- ---------- ----------- ------- ----- ------------- -- ------- ----- ------------ ---------- ------------ -- ------- ---- ------- --------- -- --- ------- --------- -- --- -------- --------- -- --- ---
| 参数 | 描述 |
|---|---|
| container | HTML video 元素的所属容器（string |
| duration | 弹幕存留时间（单位：ms，默认6秒） |
| limit | 最大弹幕数量限制（默认50条） |
| speed | 弹幕速度（默认单位：px/s，其值将影响 left/top/tops 等属性） |
| opacity | 弹幕半透明度（默认为 0.8） |
| fontSize | 弹幕字体大小（默认单位：px） |
| fontWeight | 弹幕字体的粗细（默认：bold） |
| lineHeight | 弹幕行高（默认：1.5） |
| colors | 弹幕颜色（默认：红/绿/蓝/紫/粉） |
| shadow | 是否启用弹幕文字阴影（默认开启 |
| borderRadius | 弹幕圆角（默认 4px） |
| stroke | 是否启用弹幕文字描边（默认关闭 |
| strokeColor | 弹幕文字描边颜色（默认：#000000） |
| strokeWidth | 弹幕文字描边宽度（默认：1 |
| zIndex | 弹幕层级（默认：100 |
| onShow | 弹幕进入可视区回调（可选 |
| onHide | 弹幕离开可视区回调（可选 |
| onClick | 弹幕元素点击回调（可选 |
发布弹幕
当 danmaku.js 初始化完成后，您可以使用以下方式发布弹幕：
-- -------------------- ---- ------- -------------- ----- ------------ --------- ------ ------ ---------- ------ ----- ------- ------ --------- --- ------ ---------------------- ------ --- ------- --- ------------- --- ----------- -- ---------------- ---------- ------ ---- ---- ------------------------ - ------------------------- ---
| 参数 | 描述 |
|---|---|
| text | 弹幕文本内容 |
| position | 弹幕位置（默认为 'roll'，可选：'top' / 'bottom'） |
| color | 弹幕颜色（默认为 danmaku.colors 中的随机颜色） |
| delay | 弹幕延迟时间（默认为 0） |
| itemId | 弹幕 id（可选） |
| fontSize | 弹幕字体大小（可选） |
| image | 弹幕图片路径（可选，可用于显示头像、勋章等） |
| width | 弹幕图片宽度（可选） |
| height | 弹幕图片高度（可选） |
| borderRadius | 弹幕图片圆角（可选） |
| fontStroke | 弹幕文字描边宽度（可选） |
| fontStrokeColor | 弹幕文字描边颜色（可选） |
| speed | 弹幕速度（可选，单位：px/s） |
| top | 弹幕纵坐标（可选，单位：px） |
为发布的弹幕添加事件
在发布弹幕之后，您可以为其添加 click、mouseover、mouseleave 等事件。例如：
danmaku.emit({
text: '这是一条带点击事件的弹幕',
itemId: 123456,
onClick: (danmaku) => {
console.log('您点击了该弹幕');
},
});示例代码
最后，我们来看一个完整的使用 danmaku.js 实现多个弹幕交互的示例代码。
-- -------------------- ---- -------
---- --------------
------ --------------------------------
------
------- --------------------------------------------------------------------------
--------
----- ------- - --- ---------
---------- ------------
---
----- ----- - -
------------
--------------
--------------
-------------------
------------
-------------
---------------
--
-------------- -- -
----- ---- - ------------------------------ - ---------------
--------------
-----
--------- ------
--------- ------------------------ - -- - ---
------ ------------------------ - ------
-------- --------- -- -
---------------------- ---------
--
---
-- ------
---------通过以上代码，我们实现了同屏播放多个限制数量的随机弹幕。同时，我们还为每一条弹幕添加了点击事件。这样，您就可以开始使用 danmaku.js 来实现更加生动、丰富的视频弹幕交互效果啦！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f1c81e8991b448dcb57