mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-08 19:06:15 -08:00
update
This commit is contained in:
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`
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
},
|
||||
};
|
||||
}
|
||||
Reference in new issue
Block a user