主題

利用 <video> 標籤，實作影片播放器的基礎功能

成果

完整程式碼
Demo效果

實作重點

<video> (MDN) 對照文字事件會比較清楚，分別有用到 controls, currenTime, duration, paused , playbackRate, valume ， Methods : pause(), play() ， Events : play, pause。

• 本篇將 function 拆分為不同功能，並依事件去觸發行為，日後維護與擴展會比較好找方向。
• 其中 JS 用到滿多中括號取值的可以借此機會加深對這部分的理解。。

Javascript

1. 製作個別 function

   1. 控制影片開始與暫停

      1. 利用三元運算子判斷 paused ，再用中括號取 key 值，之後直接呼叫

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

      2. 修改按鈕開始和暫停的樣式

   2. 影片往前/倒退

      1. 利用 data-set 傳值給 currentTime 改變影片時間

         function skipHandler() {
           video.currentTime += parseFloat(this.dataset.skip); // 轉數值parseFloat
         }
         

   3. 控制聲音與影片速度

      1. 在 input 放了 name 屬性，透過中括號來設定對應屬性的值

         function rangeUpdateHandler() {
           video[this.name] = this.value;
         }
         

   4. 更新影片進度條

      1. 計算影片長度：利用 currentTime (現在時間)/ duration (總時間) * 100 得到長度的百分比

      2. 修改預設寬度：把得到的百分比給 flexBasis (預設寬度)

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

   5. 點擊進度條更新影片時間

      1. 計算影片時間：利用 e.offsetX(點擊到x的座標)/ offsetWidth (整個長度) * duration (總時間)

      2. 修改影片時間：把得到的百分比給 currentTime

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

   6. 滑鼠移動時更新進度條

      1. 利用 mousemove 來觸發更新進度條，&& 等於前面是對的，就會往後做

         progress.addEventListener('mousemove', (e) => mousedown && scrubHandler(e));// && 等於前面是對的，就會往後做
         progress.addEventListener('mousedown', () => mousedown = true);
         progress.addEventListener('mouseup', () => mousedown = false);
         

2. 依事件去觸發行為。

   1. 控制影片開始/暫停

      // 開始暫停控制
      video.addEventListener('click', toggleHandler);
      toggle.addEventListener('click', toggleHandler);
      // 被觸發的開始暫停事件
      video.addEventListener('play', updateButton);
      video.addEventListener('pause', updateButton)
      

   2. 更新進度條

      video.addEventListener('timeupdate', progressHandler);
      

   3. 影片往前或倒退

      skipBtns.forEach(btn => btn.addEventListener("click", skipHandler));
      

   4. 控制聲音與影片速度

      ranges.forEach(range => range.addEventListener("change", rangeUpdateHandler));
      ranges.forEach(range => range.addEventListener("mousemove", rangeUpdateHandler));
      

   5. 控制進度條

      let mousedown = false;
      progress.addEventListener('click', scrubHandler);
      progress.addEventListener('mousemove', (e) => mousedown && scrubHandler(e)); // && 等於兩個 T 才回傳，所以第一個是 F 就不會觸發
      progress.addEventListener('mousedown', () => mousedown = true);
      progress.addEventListener('mouseup', () => mousedown = false);
      

額外知識

• <video> ：裡面有 controls 可以加，加了就有基礎功能了 XD
• 判斷式省略技巧 ：
  • && ：前面是對的就會往後做
  • || ：前面是錯的就會往後做