mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-26 00:31:20 -08:00
311 lines
8.3 KiB
Plaintext
311 lines
8.3 KiB
Plaintext
---
|
||
title: 弹幕库插件
|
||
sidebar_position: 1
|
||
---
|
||
|
||
## 演示
|
||
|
||
👉 [查看完整演示](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku)
|
||
|
||
## 安装
|
||
|
||
### 通过 `npm` 安装：
|
||
|
||
```bash
|
||
$ npm install artplayer-plugin-danmuku
|
||
```
|
||
|
||
### 通过 `yarn` 安装：
|
||
|
||
```bash
|
||
$ yarn add artplayer-plugin-danmuku
|
||
```
|
||
|
||
```js
|
||
import artplayerPluginDanmuku from 'artplayer-plugin-danmuku';
|
||
```
|
||
|
||
### 通过 `script` 安装：
|
||
|
||
```html
|
||
<script src="path/to/artplayer-plugin-danmuku/index.js"></script>
|
||
```
|
||
|
||
然后你可以通过 `window.artplayerPluginDanmuku` 访问到插件函数
|
||
|
||
## 使用
|
||
|
||
### 使用弹幕数组
|
||
|
||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
||
▶ Run Code
|
||
</div>
|
||
|
||
```js
|
||
var art = new Artplayer({
|
||
container: '.artplayer-app',
|
||
url: '/assets/sample/video.mp4',
|
||
autoSize: true,
|
||
setting: true,
|
||
playbackRate: true,
|
||
fullscreenWeb: true,
|
||
plugins: [
|
||
artplayerPluginDanmuku({
|
||
// 弹幕数组
|
||
danmuku: [
|
||
{
|
||
text: '111', // 弹幕文本
|
||
time: 1, // 发送时间，单位秒
|
||
color: '#fff', // 弹幕局部颜色
|
||
border: false, // 是否显示描边
|
||
mode: 0, // 弹幕模式: 0表示滚动、1静止
|
||
},
|
||
{
|
||
text: '222',
|
||
time: 2,
|
||
color: 'red',
|
||
border: true,
|
||
mode: 0,
|
||
},
|
||
{
|
||
text: '333',
|
||
time: 3,
|
||
color: 'green',
|
||
border: false,
|
||
mode: 1,
|
||
},
|
||
],
|
||
speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
|
||
opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
|
||
fontSize: 25, // 字体大小，支持数字和百分比
|
||
color: '#FFFFFF', // 默认字体颜色
|
||
mode: 0, // 默认模式，0-滚动，1-静止
|
||
margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比
|
||
antiOverlap: true, // 是否防重叠
|
||
useWorker: true, // 是否使用 web worker
|
||
synchronousPlayback: false, // 是否同步到播放速度
|
||
filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数
|
||
lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
|
||
maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
|
||
minWidth: 150, // 输入框最少宽度，范围在[0 ~ 500]，超出则隐藏，填 0 则永不隐藏
|
||
maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则 100% 宽度
|
||
|
||
// mount 选项用于自定义弹幕输入框的挂载位置，默认挂载在播放器控制栏中间
|
||
// 但在移动端下控制栏宽度不足，所以最好自己决定弹幕输入框放在那里
|
||
// 移动端弹幕DEMO：http://artplayer.org/danmuku.html
|
||
// mount: document.querySelector('.your-danmu-input'),
|
||
}),
|
||
],
|
||
});
|
||
```
|
||
|
||
### 使用弹幕 XML
|
||
|
||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
||
▶ Run Code
|
||
</div>
|
||
|
||
```js
|
||
var art = new Artplayer({
|
||
container: '.artplayer-app',
|
||
url: '/assets/sample/video.mp4',
|
||
plugins: [
|
||
artplayerPluginDanmuku({
|
||
// 弹幕 XML 文件，和 Bilibili 网站的弹幕格式一致
|
||
danmuku: '/assets/sample/danmuku.xml',
|
||
}),
|
||
],
|
||
});
|
||
```
|
||
|
||
### 使用异步调用
|
||
|
||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
||
▶ Run Code
|
||
</div>
|
||
|
||
```js
|
||
var art = new Artplayer({
|
||
container: '.artplayer-app',
|
||
url: '/assets/sample/video.mp4',
|
||
plugins: [
|
||
artplayerPluginDanmuku({
|
||
// 使用 Promise 异步返回
|
||
danmuku: function () {
|
||
return new Promise((resovle) => {
|
||
return resovle([
|
||
{
|
||
text: '111',
|
||
time: 1,
|
||
},
|
||
{
|
||
text: '222',
|
||
time: 2,
|
||
},
|
||
{
|
||
text: '333',
|
||
time: 3,
|
||
},
|
||
]);
|
||
});
|
||
},
|
||
}),
|
||
],
|
||
});
|
||
```
|
||
|
||
## 接口
|
||
|
||
### hide/show
|
||
|
||
- 类型: `Function`
|
||
|
||
通过方法 `hide` 和 `show` 进行隐藏或者显示弹幕
|
||
|
||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
||
▶ Run Code
|
||
</div>
|
||
|
||
```js
|
||
var art = new Artplayer({
|
||
container: '.artplayer-app',
|
||
url: '/assets/sample/video.mp4',
|
||
plugins: [
|
||
artplayerPluginDanmuku({
|
||
danmuku: '/assets/sample/danmuku.xml',
|
||
}),
|
||
],
|
||
controls: [
|
||
{
|
||
position: 'right',
|
||
html: '隐藏弹幕',
|
||
click: function () {
|
||
art.plugins.artplayerPluginDanmuku.hide();
|
||
},
|
||
},
|
||
{
|
||
position: 'right',
|
||
html: '显示弹幕',
|
||
click: function () {
|
||
art.plugins.artplayerPluginDanmuku.show();
|
||
},
|
||
},
|
||
],
|
||
});
|
||
```
|
||
|
||
### isHide
|
||
|
||
- 类型: `Boolean`
|
||
|
||
通过属性 `isHide` 判断当前弹幕是隐藏或者显示
|
||
|
||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
||
▶ Run Code
|
||
</div>
|
||
|
||
```js
|
||
var art = new Artplayer({
|
||
container: '.artplayer-app',
|
||
url: '/assets/sample/video.mp4',
|
||
plugins: [
|
||
artplayerPluginDanmuku({
|
||
danmuku: '/assets/sample/danmuku.xml',
|
||
}),
|
||
],
|
||
controls: [
|
||
{
|
||
position: 'right',
|
||
html: '隐藏弹幕',
|
||
click: function (_, event) {
|
||
if (art.plugins.artplayerPluginDanmuku.isHide) {
|
||
art.plugins.artplayerPluginDanmuku.show();
|
||
event.target.innerText = '隐藏弹幕';
|
||
} else {
|
||
art.plugins.artplayerPluginDanmuku.hide();
|
||
event.target.innerText = '显示弹幕';
|
||
}
|
||
},
|
||
},
|
||
],
|
||
});
|
||
```
|
||
|
||
### emit
|
||
|
||
- 类型: `Function`
|
||
|
||
通过方法 `emit` 发送一条实时弹幕
|
||
|
||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
||
▶ Run Code
|
||
</div>
|
||
|
||
```js
|
||
var art = new Artplayer({
|
||
container: '.artplayer-app',
|
||
url: '/assets/sample/video.mp4',
|
||
plugins: [
|
||
artplayerPluginDanmuku({
|
||
danmuku: '/assets/sample/danmuku.xml',
|
||
}),
|
||
],
|
||
controls: [
|
||
{
|
||
position: 'right',
|
||
html: '发送弹幕',
|
||
click: function () {
|
||
var text = prompt('请输入弹幕文本', '弹幕测试文本');
|
||
if (!text || !text.trim()) return;
|
||
var color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
|
||
art.plugins.artplayerPluginDanmuku.emit({
|
||
text: text,
|
||
color: color,
|
||
border: true,
|
||
});
|
||
},
|
||
},
|
||
],
|
||
});
|
||
```
|
||
|
||
### config
|
||
|
||
- 类型: `Function`
|
||
|
||
通过方法 `config` 实时改变弹幕配置，支持属性有：`speed`、`margin`、`opacity`、`fontSize`、`synchronousPlayback`、`filter`
|
||
|
||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
||
▶ Run Code
|
||
</div>
|
||
|
||
```js
|
||
var art = new Artplayer({
|
||
container: '.artplayer-app',
|
||
url: '/assets/sample/video.mp4',
|
||
plugins: [
|
||
artplayerPluginDanmuku({
|
||
danmuku: '/assets/sample/danmuku.xml',
|
||
}),
|
||
],
|
||
controls: [
|
||
{
|
||
position: 'right',
|
||
html: '弹幕大小：<input type="range" min="12" max="50" step="1" value="25">',
|
||
style: {
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
},
|
||
mounted: function ($setting) {
|
||
const $range = $setting.querySelector('input[type=range]');
|
||
$range.addEventListener('change', () => {
|
||
art.plugins.artplayerPluginDanmuku.config({
|
||
fontSize: Number($range.value),
|
||
});
|
||
});
|
||
},
|
||
},
|
||
],
|
||
});
|
||
```
|