<video src="../xxx.mp4"></video>
<div class="controls">
<button id="btnPlay">播放/暂停</button>
</div>
<div class="controls" id="progress">
进度:
<input type="range" min="0" max="100" value="0" />
<span>current</span>
/
<span>total</span>
</div>
<div class="controls" id="rate">
播放速率:
<button data-rate="0.5">0.5倍</button>
<button data-rate="0.75">0.75倍</button>
<button data-rate="1">1倍</button>
<button data-rate="1.25">1.25倍</button>
<button data-rate="1.5">1.5倍</button>
</div>
<div class="controls" id="volume">
音量:
<input type="range" min="0" max="100" value="50" />
<span>50%</span>
</div>
<div class="controls">
<button id="save">保存设置</button>
<button id="load">加载设置</button>
</div>
video {
width: 80%;
}
.active {
background: #ffbd80;
}
const controls = document.querySelectorAll(".controls")
const video = document.querySelector("video")
const progressSpans = document.querySelectorAll("#progress span")
const progressInp = document.querySelector("#progress input")
const btnPlay =document.querySelector("#btnPlay")
const rate = document.querySelector("#rate")
const volume = document.querySelector("#volume")
const inpV = volume.querySelector("input")
const spanV = volume.querySelector("span")
video.addEventListener("loadeddata", init)
function init(){
showProgress();
showSpeed();
showVolume()
for (const item of Array.from(controls)) {
item.style.display = "block"
}
}
function showProgress(){
progressSpans[0].textContent = formatTime(video.currentTime)
progressSpans[1].textContent = formatTime(video.duration)
progressInp.value = Math.floor(video.currentTime/video.duration *100)
}
function formatTime(times){
const hour = Math.floor(times/3600);
const minute = Math.floor(times/60%60)
const second = Math.floor(times%60);
function format(num){
return num>=10 ? num : '0'+num
}
return `${format(hour)}:${format(minute)}:${format(second)}`
}
video.addEventListener("timeupdate",showProgress)
progressInp.addEventListener("click",()=>{
video.currentTime = Math.floor(progressInp.value/100 * video.duration)
})
function showSpeed(){
const speed = Array.from( rate.querySelectorAll("button")).find(item=>{
return +item.dataset.rate === video.playbackRate
})
document.querySelector("#rate button.active") && document.querySelector("#rate button.active").classList.remove("active")
speed.classList.add("active")
}
rate.addEventListener("click",(e)=>{
if(e.target.tagName === 'BUTTON'){
video.playbackRate = e.target.dataset.rate
showSpeed()
}
})
video.addEventListener("ratechange",showSpeed)
function showVolume(){
if(video.muted){
inpV.value = 0
spanV.textContent = "0%"
return;
}
inpV.value = Math.floor(video.volume *100)
spanV.textContent = inpV.value +"%"
}
video.addEventListener("volumechange",showVolume)
inpV.addEventListener("click",()=>{
video.volume = inpV.value/100
})
function playOrPause(){
video.paused ? video.play() : video.pause();
}
btnPlay.addEventListener("click",playOrPause)
const save = document.querySelector("#save")
save.addEventListener("click",()=>{
localStorage.setItem("vobj",JSON.stringify({
currentTime: video.currentTime,
duration: video.duration,
progress: progressInp.value,
rate: video.playbackRate,
volume: inpV.value/100
}))
})
const load = document.querySelector("#load")
load.addEventListener("click",()=>{
let vobj = JSON.parse(localStorage.getItem("vobj"))
video.currentTime = vobj.currentTime;
video.playbackRate = vobj.rate;
video.duration = vobj.duration;
video.volume = vobj.volume
showProgress();
showSpeed();
showVolume()
})