x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-22 13:21:20 -08:00
Code Issues Packages Projects Releases Wiki Activity

update docs

Browse Source
This commit is contained in:
Harvey committed 2022-05-16 15:40:05 +08:00
1 parent d0f6d643a4
commit 93a517eaf8
53 files changed
+444 -245
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer-document/docs/en/Plugins/danmuku.mdx
+22 -7
View File
@@ -37,7 +37,9 @@ Then you can access the plugin function via `window.artplayerPluginDanmuku`
### Use the damuku array
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">▶ Run Code</div>
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
▶ Run Code
</div>
```js
var art = new Artplayer({
@@ -83,6 +85,7 @@ var art = new Artplayer({
useWorker: true, // whether to use web workers
synchronousPlayback: false, // Whether to sync to playback speed
filter: (danmu) => danmu.text.length < 50, // Barrage filter function
// mount: document.querySelector('.your-danmu-input'), // Custom barrage input box position
}),
],
});
@@ -90,7 +93,9 @@ var art = new Artplayer({
### Use the XML
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">▶ Run Code</div>
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
▶ Run Code
</div>
```js
var art = new Artplayer({
@@ -107,7 +112,9 @@ var art = new Artplayer({
### Use asynchronous calls
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">▶ Run Code</div>
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
▶ Run Code
</div>
```js
var art = new Artplayer({
@@ -147,7 +154,9 @@ var art = new Artplayer({
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>
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
▶ Run Code
</div>
```js
var art = new Artplayer({
@@ -183,7 +192,9 @@ 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/index.js">▶ Run Code</div>
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
▶ Run Code
</div>
```js
var art = new Artplayer({
@@ -218,7 +229,9 @@ var art = new Artplayer({
Send a real-time danmu by method `emit`
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">▶ Run Code</div>
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
▶ Run Code
</div>
```js
var art = new Artplayer({
@@ -254,7 +267,9 @@ var art = new Artplayer({
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>
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
▶ Run Code
</div>
```js
var art = new Artplayer({
packages/artplayer-document/docs/zh-cn/Plugins/danmuku.mdx
+26 -7
View File
@@ -37,7 +37,9 @@ import artplayerPluginDanmuku from 'artplayer-plugin-danmuku';
### 使用弹幕数组
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">▶ Run Code</div>
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
▶ Run Code
</div>
```js
var art = new Artplayer({
@@ -83,6 +85,11 @@ var art = new Artplayer({
useWorker: true, // 是否使用 web worker
synchronousPlayback: false, // 是否同步到播放速度
filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数
// mount 选项用于自定义弹幕输入框的挂载位置，默认挂载在播放器控制栏中间
// 但在移动端下控制栏宽度不足，所以最好自己决定弹幕输入框放在那里
// 移动端弹幕DEMO：http://artplayer.org/danmuku.html
// mount: document.querySelector('.your-danmu-input'),
}),
],
});
@@ -90,7 +97,9 @@ var art = new Artplayer({
### 使用弹幕 XML
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">▶ Run Code</div>
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
▶ Run Code
</div>
```js
var art = new Artplayer({
@@ -107,7 +116,9 @@ var art = new Artplayer({
### 使用异步调用
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">▶ Run Code</div>
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
▶ Run Code
</div>
```js
var art = new Artplayer({
@@ -147,7 +158,9 @@ var art = new Artplayer({
通过方法 `hide` 和 `show` 进行隐藏或者显示弹幕
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">▶ Run Code</div>
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
▶ Run Code
</div>
```js
var art = new Artplayer({
@@ -183,7 +196,9 @@ var art = new Artplayer({
通过属性 `isHide` 判断当前弹幕是隐藏或者显示
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">▶ Run Code</div>
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
▶ Run Code
</div>
```js
var art = new Artplayer({
@@ -218,7 +233,9 @@ var art = new Artplayer({
通过方法 `emit` 发送一条实时弹幕
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">▶ Run Code</div>
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
▶ Run Code
</div>
```js
var art = new Artplayer({
@@ -254,7 +271,9 @@ var art = new Artplayer({
通过方法 `config` 实时改变弹幕配置，支持属性有：`speed`、`margin`、`opacity`、`fontSize`、`synchronousPlayback`、`filter`
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">▶ Run Code</div>
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
▶ Run Code
</div>
```js
var art = new Artplayer({
packages/artplayer-plugin-danmuku/src/setting.js
+32 -14
View File
@@ -8,7 +8,7 @@ export default function setting(art, danmuku) {
const {
template: { $controlsCenter },
constructor: {
utils: { removeClass, addClass, append, setStyle, tooltip, query, inverseClass },
utils: { removeClass, addClass, append, setStyle, tooltip, query, inverseClass, isMobile },
},
} = art;
@@ -26,7 +26,12 @@ export default function setting(art, danmuku) {
const $danmuOff = getIcon(danmuOff, 'danmu-off');
const $danmuConfig = getIcon(danmuConfig, 'danmu-config');
const $danmuStyle = getIcon(danmuStyle, 'danmu-config');
const $control = danmuku.option.mount instanceof Element ? danmuku.option.mount : $controlsCenter;
let $control = $controlsCenter;
if (danmuku.option.mount instanceof Element) {
$control = danmuku.option.mount;
}
function addEmitter() {
const colors = [
@@ -55,14 +60,16 @@ export default function setting(art, danmuku) {
<div class="art-danmuku-emitter">
<div class="art-danmuku-style">
<div class="art-danmuku-style-panel">
<div class="art-danmuku-style-panel-title">模式</div>
<div class="art-danmuku-style-panel-modes">
<div class="art-danmuku-style-panel-mode art-current" data-mode="0">滚动</div>
<div class="art-danmuku-style-panel-mode" data-mode="1">静止</div>
</div>
<div class="art-danmuku-style-panel-title">颜色</div>
<div class="art-danmuku-style-panel-colors">
${colors.join('')}
<div class="art-danmuku-style-panel-inner">
<div class="art-danmuku-style-panel-title">模式</div>
<div class="art-danmuku-style-panel-modes">
<div class="art-danmuku-style-panel-mode art-current" data-mode="0">滚动</div>
<div class="art-danmuku-style-panel-mode" data-mode="1">静止</div>
</div>
<div class="art-danmuku-style-panel-title">颜色</div>
<div class="art-danmuku-style-panel-colors">
${colors.join('')}
</div>
</div>
</div>
</div>
@@ -72,10 +79,18 @@ export default function setting(art, danmuku) {
`,
);
if (isMobile) {
addClass($emitter, 'art-danmuku-mobile');
}
if ($control !== $controlsCenter) {
addClass($emitter, 'art-danmuku-mount');
}
const $style = query('.art-danmuku-style', $emitter);
const $input = query('.art-danmuku-input', $emitter);
const $send = query('.art-danmuku-send', $emitter);
const $panel = query('.art-danmuku-style-panel', $emitter);
const $panel = query('.art-danmuku-style-panel-inner', $emitter);
const $modes = query('.art-danmuku-style-panel-modes', $emitter);
const $colors = query('.art-danmuku-style-panel-colors', $emitter);
@@ -117,6 +132,10 @@ export default function setting(art, danmuku) {
art.emit('artplayerPluginDanmuku:emit', danmu);
}
function resize() {
setStyle($emitter, 'display', $control.clientWidth < 150 ? 'none' : null);
}
art.proxy($send, 'click', onSend);
art.proxy($input, 'keypress', (event) => {
@@ -142,9 +161,8 @@ export default function setting(art, danmuku) {
}
});
art.on('resize', () => {
setStyle($emitter, 'display', $control.clientWidth < 150 ? 'none' : null);
});
resize();
art.on('resize', resize);
art.on('destroy', () => {
if ($control !== $controlsCenter) {
packages/artplayer-plugin-danmuku/src/style.less
+69 -57
View File
@@ -14,7 +14,7 @@
touch-action: manipulation;
-ms-high-contrast-adjust: none;
* {
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
@@ -47,71 +47,77 @@
.art-danmuku-style-panel {
display: none;
flex-direction: column;
position: absolute;
left: -70px;
bottom: 29px;
z-index: 999;
left: -65px;
bottom: 30px;
width: 160px;
padding: 10px 10px 0;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.9);
padding-bottom: 10px;
.art-danmuku-style-panel-title {
font-size: 13px;
margin-bottom: 10px;
}
.art-danmuku-style-panel-modes {
.art-danmuku-style-panel-inner {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
flex-direction: column;
padding: 10px 10px 0;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.9);
.art-danmuku-style-panel-mode {
display: flex;
justify-content: center;
width: 47%;
padding: 4px 0;
cursor: pointer;
color: #fff;
border: 1px solid #fff;
&.art-current {
background-color: #00a1d6;
border: 1px solid #00a1d6;
}
.art-danmuku-style-panel-title {
font-size: 13px;
margin-bottom: 10px;
}
}
.art-danmuku-style-panel-colors {
display: flex;
gap: 5px;
flex-wrap: wrap;
margin-bottom: 10px;
justify-content: space-between;
.art-danmuku-style-panel-color {
cursor: pointer;
width: 15px;
height: 15px;
border: 1px solid #fff;
&.art-current{
position: relative;
box-shadow: 0 0 2px #fff;
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
border: 1px solid #000;
.art-danmuku-style-panel-modes {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
.art-danmuku-style-panel-mode {
display: flex;
justify-content: center;
width: 47%;
padding: 4px 0;
cursor: pointer;
color: #fff;
border: 1px solid #fff;
&.art-current {
background-color: #00a1d6;
border: 1px solid #00a1d6;
}
}
}
.art-danmuku-style-panel-colors {
display: flex;
gap: 5px;
flex-wrap: wrap;
margin-bottom: 10px;
justify-content: space-between;
.art-danmuku-style-panel-color {
cursor: pointer;
width: 15px;
height: 15px;
border: 1px solid #fff;
&.art-current{
position: relative;
box-shadow: 0 0 2px #fff;
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
border: 1px solid #000;
}
}
}
}
}
}
@@ -163,4 +169,10 @@
pointer-events: none;
}
}
&.art-danmuku-mobile {
.art-danmuku-style .art-danmuku-style-panel {
left: 0;
}
}
}
packages/artplayer/src/style/artplayer.less
+1 -1
View File
@@ -19,7 +19,7 @@
touch-action: manipulation;
-ms-high-contrast-adjust: none;
* {
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;