video属性练习，手写controls

 
    

      播放/暂停
    
    

      进度：
      
      current
      /
      total
    
    

      播放速率：
      0.5倍
      0.75倍
      1倍
      1.25倍
      1.5倍
    
    

      音量：
      
      50%
    
    

      保存设置
      加载设置
    

      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)
//点击进度条修改video的当前时间
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)
//点击音量进度条，修改video音量
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()
})