mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-11 13:56:15 -08:00
update docs
This commit is contained in:
Harvey Zack committed
1 parent
4dcdda0089
commit
8a1546f9dd
94 files changed
+255
-263
No files matched your search
@@ -37,7 +37,7 @@ Then you can access the plugin function via `window.artplayerPluginDanmuku`
|
||||
|
||||
### Use the damuku array
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku.js">▶ Run Code</div>
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
@@ -77,9 +77,9 @@ var art = new Artplayer({
|
||||
opacity: 1, // Opacity
|
||||
color: '#fff', // Font color
|
||||
size: 25, // Font size
|
||||
maxlength: 50, // The maximum number of words in the danmu
|
||||
margin: [10, 20], // Margin top and margin bottom
|
||||
margin: ['10%', 20], // Margin top and margin bottom
|
||||
synchronousPlayback: false, // Synchronous playback speed
|
||||
filter: (danmu) => danmu.text.length <= 50, // filter function
|
||||
}),
|
||||
],
|
||||
});
|
||||
@@ -87,7 +87,7 @@ var art = new Artplayer({
|
||||
|
||||
### Use the XML
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku.js">▶ Run Code</div>
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
@@ -104,7 +104,7 @@ var art = new Artplayer({
|
||||
|
||||
### Use asynchronous calls
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku.js">▶ Run Code</div>
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
@@ -144,7 +144,7 @@ var art = new Artplayer({
|
||||
|
||||
Hidden or show the danmuku by methods `hide` and `show`
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku.js">▶ Run Code</div>
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
@@ -180,7 +180,7 @@ var art = new Artplayer({
|
||||
|
||||
By attribute `ishide` judgment the current danmuku is hidden or displayed
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku.js">▶ Run Code</div>
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
@@ -215,7 +215,7 @@ var art = new Artplayer({
|
||||
|
||||
Send a real-time danmu by method `emit`
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku.js">▶ Run Code</div>
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
@@ -249,9 +249,9 @@ var art = new Artplayer({
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Changing the danmu configuration in real time through method `config`, support attributes: `speed`, `maxlength`, `margin`, `opacity`, `fontSize`, `synchronousPlayback`
|
||||
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.js">▶ Run Code</div>
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
|
||||
@@ -28,7 +28,7 @@ import artplayerPluginDanmuku from 'artplayer-plugin-danmuku';
|
||||
### 通过 `script` 安装：
|
||||
|
||||
```html
|
||||
<script src="path/to/artplayer-plugin-danmuku.js"></script>
|
||||
<script src="path/to/artplayer-plugin-danmuku/index.js"></script>
|
||||
```
|
||||
|
||||
然后你可以通过 `window.artplayerPluginDanmuku` 访问到插件函数
|
||||
@@ -37,7 +37,7 @@ import artplayerPluginDanmuku from 'artplayer-plugin-danmuku';
|
||||
|
||||
### 使用弹幕数组
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku.js">▶ Run Code</div>
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
@@ -77,9 +77,9 @@ var art = new Artplayer({
|
||||
opacity: 1, // 全局透明度
|
||||
color: '#fff', // 全局字体颜色
|
||||
size: 25, // 全局字体大小
|
||||
maxlength: 50, // 全局最大长度
|
||||
margin: [10, 20], // 距离顶部和距离底部的高度值
|
||||
margin: ['10%', 20], // 距离顶部和距离底部的高度值
|
||||
synchronousPlayback: false, // 是否同步到播放速度
|
||||
filter: (danmu) => danmu.text.length <= 50, // 弹幕过滤函数
|
||||
}),
|
||||
],
|
||||
});
|
||||
@@ -87,7 +87,7 @@ var art = new Artplayer({
|
||||
|
||||
### 使用弹幕 XML
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku.js">▶ Run Code</div>
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
@@ -104,7 +104,7 @@ var art = new Artplayer({
|
||||
|
||||
### 使用异步调用
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku.js">▶ Run Code</div>
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
@@ -144,7 +144,7 @@ var art = new Artplayer({
|
||||
|
||||
通过方法 `hide` 和 `show` 进行隐藏或者显示弹幕
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku.js">▶ Run Code</div>
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
@@ -180,7 +180,7 @@ var art = new Artplayer({
|
||||
|
||||
通过属性 `isHide` 判断当前弹幕是隐藏或者显示
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku.js">▶ Run Code</div>
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
@@ -215,7 +215,7 @@ var art = new Artplayer({
|
||||
|
||||
通过方法 `emit` 发送一条实时弹幕
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku.js">▶ Run Code</div>
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
@@ -249,9 +249,9 @@ var art = new Artplayer({
|
||||
|
||||
- 类型: `Function`
|
||||
|
||||
通过方法 `config` 实时改变弹幕配置，支持属性有：`speed`、`maxlength`、`margin`、`opacity`、`fontSize`、`synchronousPlayback`
|
||||
通过方法 `config` 实时改变弹幕配置，支持属性有：`speed`、`margin`、`opacity`、`fontSize`、`synchronousPlayback`、`filter`
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku.js">▶ Run Code</div>
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
|
||||
@@ -5,7 +5,7 @@ document.addEventListener('click', (event) => {
|
||||
if (codeElement) {
|
||||
const libs = event.target.dataset.libs || '';
|
||||
const code = encodeURIComponent(codeElement.innerText);
|
||||
const env = window.location.host.includes('localhost') ? 'http://localhost:8080' : 'https://artplayer.org';
|
||||
const env = window.location.host.includes('localhost') ? 'http://localhost:8081' : 'https://artplayer.org';
|
||||
const url = env + '/?libs=' + libs + '&code=' + code;
|
||||
window.open(url);
|
||||
}
|
||||
|
||||
@@ -33,7 +33,6 @@ export default class Danmuku {
|
||||
return {
|
||||
danmuku: [],
|
||||
speed: 5,
|
||||
maxlength: 50,
|
||||
margin: [10, 100],
|
||||
opacity: 1,
|
||||
fontSize: 25,
|
||||
@@ -46,7 +45,6 @@ export default class Danmuku {
|
||||
return {
|
||||
danmuku: 'array|function|string',
|
||||
speed: 'number',
|
||||
maxlength: 'number',
|
||||
margin: 'array',
|
||||
opacity: 'number',
|
||||
fontSize: 'number',
|
||||
@@ -197,7 +195,6 @@ export default class Danmuku {
|
||||
this.validator(this.option, Danmuku.scheme);
|
||||
|
||||
this.option.speed = clamp(this.option.speed, 1, 10);
|
||||
this.option.maxlength = clamp(this.option.maxlength, 10, 100);
|
||||
this.option.opacity = clamp(this.option.opacity, 0, 1);
|
||||
this.option.fontSize = clamp(this.option.fontSize, 12, 100);
|
||||
|
||||
@@ -404,7 +401,6 @@ export default class Danmuku {
|
||||
|
||||
if (!this.option.filter(danmu)) return this;
|
||||
if (!danmu.text.trim()) return this;
|
||||
if (danmu.text.length > this.option.maxlength) return this;
|
||||
|
||||
if (danmu.time) {
|
||||
danmu.time = this.utils.clamp(danmu.time, 0, Infinity);
|
||||
|
||||
Reference in new issue
Block a user