前言

最近有些算法课程是必须要上的(不然就被别人卷死了)
所以为了良好的体验, 我将视频下载, 播放, 奈何本地播放器播放效果不好
然后我脑子一热就想自己做一个简单的播放器(因为这段时间刚刚好接触了 artplayer )

开始

技术栈:

  1. URL.createObjectURL
  2. Artplayer.js

主要实现代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<input type="file" onchange="play(this)" />
<div id="player" style="display: none;"></div>
<script src="artplayer.js"></script>
<script defer>
var player=document.querySelector('#player'), file, art;
function play(e){
// 实现 input 和 player 交替显示
function set(a,b){
e.style.display=a;
player.style.display=b;
}
file=e.files[0];
if(art!=undefined) art.url=URL.createObjectURL(file);
else art=new Artplayer({
container: player,
url: URL.createObjectURL(file), // 创建 ObjectURL 实现直接访问文件
autoplay: true,
playbackRate: true,
setting: true,
screenshot: true,
pip: true,
fullscreen: true,
fullscreenWeb: true,
miniProgressBar: true,
theme: '#49ffcb',
});
set('none','block');
art.on('video:ended',_=>{
set('block','none');
});
}
</script>