mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-23 13:51:20 -08:00
update docs
This commit is contained in:
Harvey committed
1 parent
f160d8eb61
commit
5dbac4897b
57 files changed
+275
-448
No files matched your search
@@ -3,306 +3,10 @@ title: Danmuku plugin
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
## Demo
|
||||
:::danger Tip
|
||||
|
||||
👉 [View full demo](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku)
|
||||
The documentation of the current danmaku library plug-in, only the Chinese version
|
||||
|
||||
## Install
|
||||
:::
|
||||
|
||||
### Install by `npm`:
|
||||
|
||||
```bash
|
||||
$ npm install artplayer-plugin-danmuku
|
||||
```
|
||||
|
||||
### Install by `yarn`:
|
||||
|
||||
```bash
|
||||
$ yarn add artplayer-plugin-danmuku
|
||||
```
|
||||
|
||||
```js
|
||||
import artplayerPluginDanmuku from 'artplayer-plugin-danmuku';
|
||||
```
|
||||
|
||||
### Install by `script`:
|
||||
|
||||
```html
|
||||
<script src="path/to/artplayer-plugin-danmuku.js"></script>
|
||||
```
|
||||
|
||||
Then you can access the plugin function via `window.artplayerPluginDanmuku`
|
||||
|
||||
## Use
|
||||
|
||||
### Use the damuku array
|
||||
|
||||
<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({
|
||||
// Damuku array
|
||||
danmuku: [
|
||||
{
|
||||
text: '111', // Danmu text
|
||||
time: 1, // Video time
|
||||
color: '#fff', // Danmu color
|
||||
border: false, // Danmu border
|
||||
mode: 0, // Danmu mode: 0-scroll or 1-static
|
||||
},
|
||||
{
|
||||
text: '222',
|
||||
time: 2,
|
||||
color: 'red',
|
||||
border: true,
|
||||
mode: 0,
|
||||
},
|
||||
{
|
||||
text: '333',
|
||||
time: 3,
|
||||
color: 'green',
|
||||
border: false,
|
||||
mode: 1,
|
||||
},
|
||||
],
|
||||
speed: 5, // The duration of the barrage, in seconds, in the range [1 ~ 10]
|
||||
opacity: 1, // Barrage transparency, the range is [0 ~ 1]
|
||||
fontSize: 25, // Font size, supports numbers and percentages
|
||||
color: '#FFFFFF', // Default font color
|
||||
mode: 0, // Default mode, 0-scroll, 1-still
|
||||
margin: [10, '25%'], // Barrage top and bottom margins, supports numbers and percentages
|
||||
antiOverlap: true, // Whether to prevent overlapping
|
||||
useWorker: true, // whether to use web workers
|
||||
synchronousPlayback: false, // Whether to sync to playback speed
|
||||
filter: (danmu) => danmu.text.length < 50, // Barrage filter function
|
||||
lockTime: 5, // Input box lock time
|
||||
maxLength: 100, // The maximum number of words that can be input can be input box
|
||||
minWidth: 200, // At the at least width of the input box
|
||||
maxWidth: 400, // Maximum width in the input box
|
||||
theme: 'dark', // The theme color of the input box
|
||||
beforeEmit: (danmu) => !!danmu.text.trim(), // Custom verification before the barrage emit
|
||||
mount: undefined, // Customized input box mount position
|
||||
}),
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
### Use the 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({
|
||||
// Damuku xml，like the Bilibili danmuku format
|
||||
danmuku: '/assets/sample/danmuku.xml',
|
||||
}),
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
### Use asynchronous calls
|
||||
|
||||
<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({
|
||||
// Use promise to return asynchronous
|
||||
danmuku: function () {
|
||||
return new Promise((resovle) => {
|
||||
return resovle([
|
||||
{
|
||||
text: '111',
|
||||
time: 1,
|
||||
},
|
||||
{
|
||||
text: '222',
|
||||
time: 2,
|
||||
},
|
||||
{
|
||||
text: '333',
|
||||
time: 3,
|
||||
},
|
||||
]);
|
||||
});
|
||||
},
|
||||
}),
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## Interface
|
||||
|
||||
### hide/show
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Hidden or show the danmuku by methods `hide` and `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: 'Hide',
|
||||
click: function () {
|
||||
art.plugins.artplayerPluginDanmuku.hide();
|
||||
},
|
||||
},
|
||||
{
|
||||
position: 'right',
|
||||
html: 'Show',
|
||||
click: function () {
|
||||
art.plugins.artplayerPluginDanmuku.show();
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
### isHide
|
||||
|
||||
- Type: `Boolean`
|
||||
|
||||
By attribute `ishide` judgment the current danmuku is hidden or displayed
|
||||
|
||||
<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: 'Hide',
|
||||
click: function (_, event) {
|
||||
if (art.plugins.artplayerPluginDanmuku.isHide) {
|
||||
art.plugins.artplayerPluginDanmuku.show();
|
||||
event.target.innerText = 'Hide';
|
||||
} else {
|
||||
art.plugins.artplayerPluginDanmuku.hide();
|
||||
event.target.innerText = 'Show';
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
### emit
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Send a real-time danmu by method `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: 'Send',
|
||||
click: function () {
|
||||
var text = prompt('Input the danmu text', 'danmu text');
|
||||
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
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Changing the danmu configuration in real time through method `config`, support attributes: `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: 'Size：<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),
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
👉 [https://artplayer.org/document/zh-cn/Plugins/danmuku/](https://artplayer.org/document/zh-cn/Plugins/danmuku/)
|
||||
@@ -21,14 +21,17 @@ $ npm install artplayer-plugin-danmuku
|
||||
$ yarn add artplayer-plugin-danmuku
|
||||
```
|
||||
|
||||
```js
|
||||
import artplayerPluginDanmuku from 'artplayer-plugin-danmuku';
|
||||
```
|
||||
|
||||
### 通过 `script` 安装：
|
||||
|
||||
```html
|
||||
<!-- 本地 -->
|
||||
<script src="path/to/artplayer-plugin-danmuku/index.js"></script>
|
||||
|
||||
<!-- jsdelivr -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js"></script>
|
||||
|
||||
<!-- unpkg -->
|
||||
<script src="https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js"></script>
|
||||
```
|
||||
|
||||
然后你可以通过 `window.artplayerPluginDanmuku` 访问到插件函数
|
||||
@@ -273,7 +276,20 @@ var art = new Artplayer({
|
||||
|
||||
- 类型: `Function`
|
||||
|
||||
通过方法 `config` 实时改变弹幕配置，支持属性有：`speed`、`margin`、`opacity`、`fontSize`、`synchronousPlayback`、`filter`
|
||||
通过方法 `config` 实时改变弹幕配置，支持属性有：
|
||||
|
||||
- danmuku
|
||||
- speed
|
||||
- opacity
|
||||
- fontSize
|
||||
- color
|
||||
- mode
|
||||
- margin
|
||||
- antiOverlap
|
||||
- synchronousPlayback
|
||||
- filter
|
||||
- lockTime
|
||||
- beforeEmit
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
||||
▶ Run Code
|
||||
@@ -308,3 +324,104 @@ var art = new Artplayer({
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
### load
|
||||
|
||||
- 类型: `Function`
|
||||
|
||||
通过 load 方法可以重载弹幕源，或者切换新弹幕
|
||||
|
||||
<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.load();
|
||||
},
|
||||
},
|
||||
{
|
||||
position: 'right',
|
||||
html: '切换弹幕',
|
||||
click: function () {
|
||||
art.plugins.artplayerPluginDanmuku.config({
|
||||
danmuku: '/assets/sample/danmuku-v2.xml',
|
||||
});
|
||||
art.plugins.artplayerPluginDanmuku.load();
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## 事件
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
setting: true,
|
||||
plugins: [
|
||||
artplayerPluginDanmuku({
|
||||
danmuku: '/assets/sample/danmuku.xml',
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
// 监听手动输入的弹幕，保存到数据库
|
||||
art.on('artplayerPluginDanmuku:emit', (danmu) => {
|
||||
console.info('新增弹幕', danmu);
|
||||
});
|
||||
|
||||
// 监听加载到的弹幕数组
|
||||
art.on('artplayerPluginDanmuku:loaded', (danmus) => {
|
||||
console.info('加载弹幕', danmus.length);
|
||||
});
|
||||
|
||||
// 监听加载到弹幕的错误
|
||||
art.on('artplayerPluginDanmuku:error', (error) => {
|
||||
console.info('加载错误', error);
|
||||
});
|
||||
|
||||
// 监听弹幕配置变化
|
||||
art.on('artplayerPluginDanmuku:config', (option) => {
|
||||
console.info('配置变化', option);
|
||||
});
|
||||
|
||||
// 监听弹幕停止
|
||||
art.on('artplayerPluginDanmuku:stop', () => {
|
||||
console.info('弹幕停止');
|
||||
});
|
||||
|
||||
// 监听弹幕开始
|
||||
art.on('artplayerPluginDanmuku:start', () => {
|
||||
console.info('弹幕开始');
|
||||
});
|
||||
|
||||
// 监听弹幕隐藏
|
||||
art.on('artplayerPluginDanmuku:hide', () => {
|
||||
console.info('弹幕隐藏');
|
||||
});
|
||||
|
||||
// 监听弹幕显示
|
||||
art.on('artplayerPluginDanmuku:show', () => {
|
||||
console.info('弹幕显示');
|
||||
});
|
||||
|
||||
// 监听弹幕销毁
|
||||
art.on('artplayerPluginDanmuku:destroy', () => {
|
||||
console.info('弹幕销毁');
|
||||
});
|
||||
```
|
||||
Reference in new issue
Block a user