diff --git a/docs/assets/example/danmuku.js b/docs/assets/example/danmuku.js
index ec422aa81..2bd28f052 100644
--- a/docs/assets/example/danmuku.js
+++ b/docs/assets/example/danmuku.js
@@ -4,15 +4,18 @@ var art = new Artplayer({
autoSize: true,
fullscreen: true,
fullscreenWeb: true,
+ flip: true,
+ playbackRate: true,
+ aspectRatio: true,
setting: true,
plugins: [
artplayerPluginDanmuku({
danmuku: '/assets/sample/danmuku-v2.xml',
- speed: 5, // 弹幕持续时间，单位秒
- opacity: 1, // 弹幕透明度
- margin: ['2%', 60], // 弹幕上下边距
+ speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
+ opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
+ fontSize: 25, // 字体大小，支持数字和百分比
+ margin: ['2%', 60], // 弹幕上下边距，支持数字和百分比
antiOverlap: true, // 是否防重叠
- fontSize: 25, // 字体大小
useWorker: true, // 是否使用 web worker
synchronousPlayback: false, // 是否同步到播放速度
filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数
diff --git a/docs/mobile.html b/docs/mobile.html
index 6771ab98a..42535fe7f 100644
--- a/docs/mobile.html
+++ b/docs/mobile.html
@@ -42,7 +42,6 @@
-
\ No newline at end of file
diff --git a/packages/artplayer-plugin-danmuku/src/control/index.js b/packages/artplayer-plugin-danmuku/src/control/index.js
deleted file mode 100644
index ce6520f94..000000000
--- a/packages/artplayer-plugin-danmuku/src/control/index.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import style from 'bundle-text:./style.less';
-import { createApp } from 'vue';
-import App from './App.vue';
-
-if (typeof document !== 'undefined') {
- if (!document.getElementById('artplayer-plugin-danmuku-style')) {
- const $style = document.createElement('style');
- $style.id = 'artplayer-plugin-danmuku-style';
- $style.textContent = style;
- document.head.appendChild($style);
- }
-}
-
-export default class Control {
- constructor(art, danmuku) {
- this.art = art;
- this.danmuku = danmuku;
- this.apps = new Map();
- }
-
- mount(el) {
- const that = this;
- const app = createApp(App);
-
- app.use({
- install(app) {
- app.config.globalProperties.$art = that.art;
- app.config.globalProperties.$danmuku = that.danmuku;
- },
- });
-
- app.mount(el);
- this.apps.set(el, app);
-
- return app;
- }
-
- unmount(el) {
- const app = this.apps.get(el);
- if (app) {
- app.unmount();
- this.apps.delete(el);
- }
- }
-}
diff --git a/packages/artplayer-plugin-danmuku/src/control/style.less b/packages/artplayer-plugin-danmuku/src/control/style.less
deleted file mode 100644
index f8e9585ef..000000000
--- a/packages/artplayer-plugin-danmuku/src/control/style.less
+++ /dev/null
@@ -1,39 +0,0 @@
-.artplayer-plugin-danmuku {
- position: relative;
- display: flex;
- align-items: center;
- justify-content: space-between;
- font-size: 14px;
- font-family: Roboto, Arial, Helvetica, sans-serif;
-
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
-
- ::-webkit-scrollbar {
- width: 5px;
- height: 5px;
- }
-
- ::-webkit-scrollbar-thumb {
- background-color: #666;
- }
-
- ::-webkit-scrollbar-thumb:hover {
- background-color: #ccc;
- }
-
- .apd-toggle {
- width: 50px;
- }
-
- .apd-config {
- width: 50px;
- }
-
- .apd-input {
- flex: 1;
- }
-}
\ No newline at end of file
diff --git a/packages/artplayer-plugin-danmuku/src/danmuku.js b/packages/artplayer-plugin-danmuku/src/danmuku.js
index 3eaa9bab1..598678540 100644
--- a/packages/artplayer-plugin-danmuku/src/danmuku.js
+++ b/packages/artplayer-plugin-danmuku/src/danmuku.js
@@ -109,23 +109,6 @@ export default class Danmuku {
return Danmuku.option.margin[1];
}
- get fontSize() {
- const { clamp } = this.utils;
- const value = this.option.fontSize;
- const { clientHeight } = this.$player;
-
- if (typeof value === 'number') {
- return clamp(value, 12, 200);
- }
-
- if (typeof value === 'string' && value.endsWith('%')) {
- const ratio = parseFloat(value) / 100;
- return clamp(clientHeight * ratio, 12, 200);
- }
-
- return this.option.fontSize;
- }
-
filter(state, callback) {
return this.queue.filter((danmu) => danmu.$state === state).map(callback);
}
@@ -200,6 +183,22 @@ export default class Danmuku {
return result;
}
+ getFontSize(fontSize) {
+ const { clamp } = this.utils;
+ const { clientHeight } = this.$player;
+
+ if (typeof fontSize === 'number') {
+ return clamp(fontSize, 12, clientHeight);
+ }
+
+ if (typeof fontSize === 'string' && fontSize.endsWith('%')) {
+ const ratio = parseFloat(fontSize) / 100;
+ return clamp(clientHeight * ratio, 12, clientHeight);
+ }
+
+ return Danmuku.option.fontSize;
+ }
+
postMessage(message = {}) {
return new Promise((resolve) => {
if (this.option.useWorker && this.worker && this.worker.postMessage) {
@@ -250,11 +249,15 @@ export default class Danmuku {
this.option = Object.assign({}, Danmuku.option, this.option, option);
this.validator(this.option, Danmuku.scheme);
- if (option.fontSize) this.reset();
this.option.speed = clamp(this.option.speed, 1, 10);
this.option.opacity = clamp(this.option.opacity, 0, 1);
+ if (option.fontSize) {
+ this.option.fontSize = this.getFontSize(this.option.fontSize);
+ this.reset();
+ }
+
this.art.emit('artplayerPluginDanmuku:config', this.option);
return this;
@@ -338,7 +341,7 @@ export default class Danmuku {
danmu.$ref.style.left = `${clientWidth}px`;
danmu.$ref.style.opacity = this.option.opacity;
- danmu.$ref.style.fontSize = `${this.fontSize}px`;
+ danmu.$ref.style.fontSize = `${this.option.fontSize}px`;
danmu.$ref.style.color = danmu.color || '#fff';
danmu.$ref.style.border = danmu.border ? `1px solid ${danmu.color || '#fff'}` : 'none';
danmu.$ref.style.marginLeft = '0px';
diff --git a/packages/artplayer-plugin-danmuku/src/setting.js b/packages/artplayer-plugin-danmuku/src/setting.js
index 194e3f222..331b6a37a 100644
--- a/packages/artplayer-plugin-danmuku/src/setting.js
+++ b/packages/artplayer-plugin-danmuku/src/setting.js
@@ -110,30 +110,30 @@ export default function setting(art, danmuku) {
tooltip: '适中',
selector: [
{
- html: '极慢',
- fontSize: 12,
+ html: '极小',
+ fontSize: '2%',
},
{
- html: '较慢',
- fontSize: 7.5,
+ html: '较小',
+ fontSize: '4%',
},
{
default: true,
html: '适中',
- fontSize: 5,
+ fontSize: '6%',
},
{
- html: '较快',
- fontSize: 2.5,
+ html: '较大',
+ fontSize: '8%',
},
{
- html: '极快',
- fontSize: 1,
+ html: '极大',
+ fontSize: '10%',
},
],
onSelect: function (item) {
danmuku.config({
- speed: item.time,
+ fontSize: item.fontSize,
});
return item.html;
},
diff --git a/packages/artplayer/src/setting/index.js b/packages/artplayer/src/setting/index.js
index 515909ffd..52658dbea 100644
--- a/packages/artplayer/src/setting/index.js
+++ b/packages/artplayer/src/setting/index.js
@@ -17,7 +17,7 @@ function makeRecursion(option, parentItem, parentList) {
return option;
}
-function isHtmlType(val) {
+function isStringOrNumber(val) {
return ['string', 'number'].includes(typeof val);
}
@@ -135,11 +135,11 @@ export default class Setting extends Component {
const $item = document.createElement('div');
addClass($item, 'art-setting-item');
- if (isHtmlType(item.name)) {
+ if (isStringOrNumber(item.name)) {
$item.dataset.name = item.name;
}
- if (isHtmlType(item.value)) {
+ if (isStringOrNumber(item.value)) {
$item.dataset.value = item.value;
}
@@ -151,11 +151,14 @@ export default class Setting extends Component {
switch (type) {
case 'switch':
- append($icon, isHtmlType(item.icon) ? item.icon : icons.config);
+ append($icon, isStringOrNumber(item.icon) || item.icon instanceof Element ? item.icon : icons.config);
break;
case 'selector':
if (item.selector && item.selector.length) {
- append($icon, isHtmlType(item.icon) ? item.icon : icons.config);
+ append(
+ $icon,
+ isStringOrNumber(item.icon) || item.icon instanceof Element ? item.icon : icons.config,
+ );
} else {
append($icon, icons.check);
}
@@ -172,7 +175,7 @@ export default class Setting extends Component {
return $icon.innerHTML;
},
set(value) {
- if (isHtmlType(value)) {
+ if (isStringOrNumber(value)) {
$icon.innerHTML = value;
}
},
@@ -189,7 +192,7 @@ export default class Setting extends Component {
return $html.innerHTML;
},
set(value) {
- if (isHtmlType(value)) {
+ if (isStringOrNumber(value)) {
$html.innerHTML = value;
}
},
@@ -206,7 +209,7 @@ export default class Setting extends Component {
return $tooltip.innerHTML;
},
set(value) {
- if (isHtmlType(value)) {
+ if (isStringOrNumber(value)) {
$tooltip.innerHTML = value;
}
},
@@ -270,7 +273,7 @@ export default class Setting extends Component {
if (item._parentItem && item._parentItem.onSelect) {
const result = await item._parentItem.onSelect.call(this.art, item, $item, event);
- if (item._parentItem._$tooltip && isHtmlType(result)) {
+ if (item._parentItem._$tooltip && isStringOrNumber(result)) {
item._parentItem._$tooltip.innerHTML = result;
}
}