This commit is contained in:
zhw2590582 committed 2021-11-25 20:23:14 +08:00
1 parent 396026f533
commit f4d3c77c6c
4 files changed
+4 -145

No files matched your search

@@ -455,7 +455,7 @@ var art = new Artplayer({
- 类型: `Boolean`
- 默认: `false`
内置插件:字幕时间偏移插件,偏移的时间范围在 `[-5s, 5s]`
字幕时间偏移,范围在 `[-5s, 5s]`
<div className="run-code">▶ Run Code</div>
@@ -476,7 +476,7 @@ var art = new Artplayer({
- 类型: `Boolean`
- 默认: `false`
内置插件:迷你进度条插件,只在播放器失去焦点后且正在播放时出现
迷你进度条,只在播放器失去焦点后且正在播放时出现
<div className="run-code">▶ Run Code</div>
@@ -493,7 +493,7 @@ var art = new Artplayer({
- 类型: `Boolean`
- 默认: `false`
内置插件:本地视频插件,需要使用`art.plugins.localVideo.attach`方法挂载打开视频按钮
打开本地视频,需要使用`art.plugins.localVideo.attach`方法挂载打开视频按钮
<div className="run-code">▶ Run Code</div>
@@ -520,7 +520,7 @@ var art = new Artplayer({
- 类型: `Boolean`
- 默认: `false`
内置插件:本地字幕插件,需要使用`art.plugins.localSubtitle.attach`方法挂载打开字幕按钮
打开本地字幕,需要使用`art.plugins.localSubtitle.attach`方法挂载打开字幕按钮
<div className="run-code">▶ Run Code</div>
@@ -542,35 +542,6 @@ var art = new Artplayer({
});
```
## networkMonitor
- 类型: `Boolean`
- 默认: `false`
内置插件:播放卡顿监听插件
<div className="run-code">▶ Run Code</div>
```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
networkMonitor: true,
});
// 例如,当比率等于0.5时,它意味着每10秒的采样时间里有5秒的时间是卡顿的
let notice = false;
art.on('networkMonitor', (ratio) => {
if (ratio >= 0.5 && !notice) {
notice = true;
console.log('当前播放状态欠佳');
}
});
// 修改采样时间,单位是毫秒,默认为10秒。
art.plugins.networkMonitor.sample(30000);
```
## useSSR
- 类型: `Boolean`
-10
View File
@@ -3,8 +3,6 @@ import subtitleOffset from './subtitleOffset';
import localVideo from './localVideo';
import localSubtitle from './localSubtitle';
import miniProgressBar from './miniProgressBar';
import networkMonitor from './networkMonitor';
import log from './log';
export default class Plugins {
constructor(art) {
@@ -29,14 +27,6 @@ export default class Plugins {
this.add(localSubtitle);
}
if (option.networkMonitor) {
this.add(networkMonitor);
}
if (option.log) {
this.add(log);
}
art.option.plugins.forEach((plugin) => {
this.add(plugin);
});
-51
View File
@@ -1,51 +0,0 @@
import { append, setStyle, remove, escape } from '../utils';
export default function log(art) {
const { layers } = art;
let $log = null;
layers.add({
name: 'log',
style: {
bottom: '50px',
},
mounted($el) {
$log = $el;
},
});
let timer = null;
const max = 5;
const timeout = 3000;
function check() {
const count = $log.childElementCount;
setStyle($log, 'bottom', art.controls.show ? '50px' : '10px');
if (count) {
if (count > max) {
remove($log.firstElementChild);
timer = setTimeout(check, timeout);
} else {
timer = setTimeout(() => {
remove($log.firstElementChild);
check();
}, timeout);
}
} else {
setStyle($log, 'display', 'none');
}
}
art.on('destroy', () => clearTimeout(timer));
return {
name: 'log',
emit(msg) {
if (typeof msg !== 'string') return;
append($log, `<p>${escape(msg)}</p>`);
setStyle($log, 'display', 'block');
clearTimeout(timer);
check();
},
};
}
@@ -1,51 +0,0 @@
export default function networkMonitor(art) {
let sampleTime = 10000;
let waitTime = 0;
let playTime = 0;
let lastTime = 0;
let timer = null;
function resetTime() {
waitTime = 0;
playTime = 0;
lastTime = 0;
cancelAnimationFrame(timer);
timer = null;
}
function startTime() {
if (timer) return;
(function loop() {
if (art.isDestroy) return;
timer = requestAnimationFrame(() => {
const nowTime = Date.now();
if (lastTime) {
const diffTime = nowTime - lastTime;
playTime += diffTime;
if (!art.player.playing) {
waitTime += diffTime;
}
}
lastTime = nowTime;
art.emit('networkMonitor', waitTime / playTime);
if (playTime >= sampleTime) {
waitTime = 0;
playTime = 0;
}
loop();
});
})();
}
art.on('play', startTime);
art.on('pause', resetTime);
return {
name: 'networkMonitor',
reset: resetTime,
start: startTime,
sample: time => {
sampleTime = time;
},
};
}