今天第十一堂課要做的是影片播放器。其實影片播放器只需要用一個<video>element就可以產生一個有播放鍵、時間軸、音量軸跟全螢幕按鈕的播放介面，但今天要做的是客製化介面。我們要做能夠調整播放速度還有快進、快退等按鈕的介面。實作範例如下(硬要截一個表情很醜的瞬間)：

邏輯流程

1. 取得所有控制項目element
2. 替各個控制項目加入監聽，如滑鼠點擊、拖曳
3. 寫播放、暫停函式
4. 寫改變播放、暫停鍵外觀函式
5. 寫快進、快退函式
6. 寫一個函式能根據拖曳音量或播放速度不同拉條來改變音量和播放速度
7. 寫進度條隨播放時間增加的函式
8. 寫點擊或拖曳進度條來改變播放時間點的函式

課程重點

1. 在寫播放、暫停函式時，我們用下面這樣的寫法：

   const method = video.paused?'play':'pause';
   video[method]();
   

   就是當video這個element是暫停時，就執行video.play()，反之則執行video.pause()。
2. 同樣的，在寫調整音量或播放速度函式時，我們用這樣的寫法：

   video[this.name] = this.value;
   

   這邊的this是音量或是播放速度的拉條，兩個拉條的name分別是volume、playbackRate，也是video的兩個屬性。所以可以在一個函式就完成音量跟播放速度的調整。
3. 在寫點擊或拖曳進度條來改變播放時間點的函式，寫法如下：

   const scrubTime = (e.offsetX/progress.offsetWidth)*video.duration;
   video.currentTime = scrubTime;
   

   這邊重點在於滑鼠點擊進度條(progress)時，e.offsetX是相對於進度條element的水平方向長度，而progress.offsetWidth是進度條的總長度。如此一來才能知道點擊的位置是進度條的幾分之幾，並乘上video.duration(影片總時間)，轉換成現在播放時間。
4. 在寫進度條隨播放時間增加的函式時，使用的監聽事件是timeupdate。
5. 在寫點擊或拖曳進度條來改變播放時間點的函式時，要先監聽mousedown事件，給一個mousedown=true的Flag。所以接著在監聽mousemove時(拖曳)，要先判斷mousedown是否為true，若是才呼叫函式。這邊我們用了一個很簡潔的寫法：

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

   意思是當mousedown為true的時候，才會接著呼叫scrub(e)。