今天首先要控制音量大小與調整播放速度

1.先設定會使用到的函式名稱

function handleRangeUpdate() {
  console.log(this.name)
  console.log(this.value);
}

2.綁定監聽器

ranges.forEach(range => range.addEventListener('change',handleRangeUpdate))
ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate))

這時拖動音量大小與播放速度的Bar時，都會印出該input的name與value值

3.寫完整函式

function handleRangeUpdate() {
  video[this.name] = this.value
  // console.log(this.name)
  // console.log(this.value);
}

相當於呼叫這兩個屬性
video.volume
video.playbackRate

最後，影片播放進度條要隨著影片播放的長度更新，
並且若是直接點擊進度條，影片也可以直接到該進度畫面

1.先設定會使用到的函式名稱
查看Css樣式時，可以知道控制填滿進度條的關鍵是flexBasis這個style，並且是用%數來控制
所以算出
目前播放進度(video.currentTime)為
影片總長(video.duration)的幾%後
就可以帶入flexBasis中

function handleProgress() {
  const percent = (video.currentTime / video.duration) * 100;
  progressBar.style.flexBasis = `${percent}%`;
}

2.綁定監聽器

video.addEventListener('timeupdate', handleProgress)

若video.currentTime有改變就會觸發handleProgress

3.製作點擊進度條，直接到該進度畫面之函式

function scrub(e) {
  console.log(e)
}

4.綁定監聽器

progress.addEventListener('click', scrub)

5.寫完整函式

function scrub(e) {
  console.log(e)
  const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
  video.currentTime = scrubTime;
}

利用event中的offestX，紀錄當前點擊的位置，
除以進度條本身的長度，最後乘上影片的總長度，
即可算出影片現在的進度。
而當video.currentTime改變時，handleProgress同樣會被觸發。

6.製作拖拉進度條，直接到該進度畫面之監聽器
拖拉的動作，一開始，一定是滑鼠按下不放 => 拖拉 => 滑鼠放開
利用這個動作的開始點，我們就可以知道甚麼時候使用者想要進行拖拉進度條的動作
所以，我們可以針對滑鼠按下的動作，設定判斷。
當滑鼠按下時，監聽mousemove，才會進行scrub(e)的函式

let mousedown = flase
progress.addEventListener('mousedown', () => mousedown = true)
progress.addEventListener('mouseup', () => mousedown = false)
progress.addEventListener('mousemove',(e) => mousedown && scrub(e))

今天的練習完成囉，完整的程式碼請直接點擊下方codePen連結
codePen
或者也可以直接到WES BOS的網站下載打包好的檔案
javascript30