iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 16
2
Modern Web

實作經典 JavaScript 30系列 第 16

Day16: 自製的影片撥放器(二)

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

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


上一篇
Day15: 自製的影片撥放器(一)
下一篇
Day17: 為網站設計一個彩蛋
系列文
實作經典 JavaScript 3030

尚未有邦友留言

立即登入留言