Day11 HTML Video Player

Demo

今天要來做一個客製化的影片播放器，主要分為四個部分:

1. 播放與暫停影片
2. 音量與速度
3. 快/倒轉
4. 控制進度條

定義變數

播放與暫停影片

點選播放按鈕與畫面時，需要播放或暫停：

觸發對象

要做的事情

這裡還滿容易理解的，透過myVideo.paused判斷狀態再決定播放或暫停。
playBtn用了三元運算子，判斷該顯示 ❚❚ 或 ►

音量與速度

一般的直覺可能會把音量和速度兩件事情拆開來做，但這邊巧妙的利用input的name來區分選取的對象，所以一開始定義的時候直接選取了所有的input

const inputBtn = document.querySelectorAll(‘input’)

透過forEach分別去做事件的觸發

注意:用 點號 . 存取時，點號右邊必須是一個可識別字(identifier)，例如屬性名稱，不能是字串、變數、運算式…等。但用 中括號 [] 存取時，中括號裡面可以放字串、變數、運算式等。
來源1 來源2

快/倒轉

這裡一樣透過一起選取button再forEach分別做事件
再透過dataset取得預設值,指定給currentTime

進度條顯示

透過時間總長度(duration)和現在時間(duration)去算出百分比

timeupdate是一個事件，當currentTime更新時會觸發timeupdate事件。
詳細介紹

flexBasis介紹

控制時間軸

這邊分為兩個部分，可以滑鼠按下或拖曳。
拖曳必須是在mousedown的狀況下才能觸發，而且mouseup時必須關閉
觸發對象為整個時間軸。

這裡我們透過mousedown之後，重新再定義一次觸發條件，即符合我們要的mousedown後才能mousemove。
而在這邊我認為mouseup觸發的對象不是processbar_out，使用者在拖曳時，有可能會離開我們原本的目標processbar_out，導致關閉不了mousemove，所以我將mosueup觸發對象設定為整個document

最後執行任務

1. 取得滑鼠位置與processbar_out的寬算出百分比
2. 因為我們要時間指定給currentTime所以要將百分比轉換回正確的時間值

補充

原始範例的做法是定義一個mousedown = false的變數去判斷是否滑鼠按下來做觸發，其中有一個很酷的寫法：

progress.addEventListener(‘mousemove’, (e) => mousedown && scrub(e));

這裡的&&是而且的意思，也就是要執行scrub的條件必須左右都為true，當mousedown = true，右邊的scrub才會執行(也就是我們要的效果，mousedown才能mousemove)