HTML5播放器
实现目标
有进度条，可拖动点击有音量，可改变音量有倍速，可改变播放速度有前进后退按钮有暂停播放键
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Video Player
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="player">
<video class="player__video viewer" src="./oceans.mp4" ></video>
<div class="player__controls">
<div class="progress">
<div class="progress__filled"></div>
</div>
<button class="player__button toggle" title="Toggle Play">►
</button>
<input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="0.2">
<input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
<button data-skip="-10" class="player__button">« 10s
</button>
<button data-skip="25" class="player__button">25s »
</button>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
const player
= document
.querySelector('.player');
const video
= player
.querySelector('.viewer');
const toggle
= player
.querySelector('.toggle');
const skipButtons
= player
.querySelectorAll('button[data-skip]');
const ranges
= player
.querySelectorAll('.player__slider');
const progressBar
= player
.querySelector('.progress__filled');
console
.log(progressBar
);
const progress
= player
.querySelector('.progress');
console
.log(progress
);
function togglePlay(){
const method
= video
.paused
?'play':'pause';
video
[method
]();
}
function updateToggle(){
const icon
= video
.paused
?'►':'ǁ';
toggle
.textContent
= icon
;
}
function skip(){
console
.log('skip....');
video
.currentTime
+= parseFloat(this.dataset
.skip
);
}
function handleRange(){
video
[this.name
] = this.value
;
}
function handleProgress(){
const percent
= (video
.currentTime
/ video
.duration
) * 100;
progressBar
.style
.flexBasis
= `${percent}%`;
}
function screb(e
){
const screbTime
= (e
.offsetX
/ progress
.offsetWidth
) * video
.duration
;
video
.currentTime
= screbTime
;
}
video
.addEventListener('click',togglePlay
);
video
.addEventListener('play',updateToggle
);
video
.addEventListener('pause',updateToggle
);
toggle
.addEventListener('click',togglePlay
);
video
.addEventListener('timeupdate',handleProgress
);
progress
.addEventListener('click',screb
);
let mousedown
= false;
progress
.addEventListener('mousedown',()=>mousedown
= true);
progress
.addEventListener('mouseup',()=>mousedown
= false);
progress
.addEventListener('mousemove',e
=>mousedown
&& screb(e
));
skipButtons
.forEach(item
=>item
.addEventListener('click',skip
));
ranges
.forEach(item
=>item
.addEventListener('change',handleRange
));
ranges
.forEach(item
=>item
.addEventListener('mousemove',handleRange
));
实现效果
