[程式碼&DEMO] [HackMD完整筆記]

目標

1.使用HTML5的video tag做出各種播放器功能

• 滑動調節音量以及播放速度
• 按鈕點擊快進、回退
• 可點擊影片畫面或按鈕播放/暫停視頻播放
• 點擊或拖動進度條去改變影片播放處

2.使程式更精簡，去除耦合

步驟流程

使 去控制
用=========>
者

Video 執行
狀 =============>
態

(相對應) 觸發
事 =================>
件 .addEventListener

updateButton()

學習筆記

video對象的各種屬性、方法和事件:

• paused: video的屬性，去判斷是否在播放。
• play( ): 方法，可以播放影片。
• pause( ) :方法，可以暫停播放。
• currentTime: video的屬性，用以設置影片當前的時間。
• [補充]controls:video的屬性。
  (若不需客製化，可用此屬性完成基本播放器設置)
  如果此屬性存在，則瀏覽器將提供允許用戶控制影片播放，音量，搜索和暫停/繼續播放。

觀念: 影片改變了狀態，才去更新畫面。按鈕是跟隨著影片狀態去改變，我們只要去操作影片狀態。 這是因為，除了點擊播放/暫停按鈕以外，我們還可以通過鍵盤快捷鍵、第三方插件甚至耳機上的操作按鈕等其他方式來控制。因此，通過本身的播放狀態來判斷是最不容易出錯的。

• 判斷播放狀態

  寫一個togglePlay方法，根據影片的播放狀態來判斷該執行.play()方法或.pause()方法。

  function togglePlay() {
      if (video.paused) {
          video.play();
      } else (
          video.pause();
      )
  }
  video.addEventListener('click', togglePlay);
  toggle.addEventListener('click', togglePlay);
  

  三元運算子

  function tooglePlay() {
      video.paused ? video.play() : video.pause()
  }
  

  字符串來執行屬性方法

  video [method] ( )=video.play( )
  但不能寫成video.method( )，因為這樣就變成呼叫video底下的function method。
  使用中括號[]包起來的會自動變成字串，取其物件屬性，再去做呼叫。

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

• 圖標的切換

  在調用 updateButton 的時候，這個方法已經被綁定在了 addEventListener 的調用者上，也就是綁定到了 video 上。因此，this.paused 在這裡就相當於 video.paused。

  // 邏輯
  function updateButton() {
      const icon = this.paused ? '►' : '❚ ❚';
      toggle.textContent = icon;
  }
  // 事件
  video.addEventListener('play', updateButton)；
  video.addEventListener('pause', updateButton)；
  

  快退/快進按鍵添加 data-skip 屬性，對應的值為快退/快進的秒數。
  data-** 此屬性需通過.dataset.**來取得。

  // 邏輯
  function skip() {
  video.currentTime += parseFloat(this.dataset.skip);
  }
  // 事件
  skipButtons.forEach(button => button.addEventListener('click', skip));
  

  parseFloat

  因為我們獲取到的是字串，所以要通過 parseFloat 轉換。

  function skip() {
      video.currentTime += parseFloat(this.dataset.skip);
  }
  

• 進度條操作

  flexBasis

  progress_filled是一个 flex 定位的元素，改變它的 flex-basis 的百分比值就可以調整它所占的父元素寬度。flex-basis 值代表 flex 元素在主軸方向上的初始尺寸。

  // 根据当前播放时间来调节进度条
  function handleProgress() {
  const percent = (video.currentTime / video.duration) * 100;
  progressBar.style.flexBasis = `${percent}%`;
  }
  

  mouseEvent的滑鼠座標

  offsetX屬性: 該屬性代表鼠標單擊位置相位對於該元素的水平偏移。得到後轉換計算出該位置的百分比，同時也就知道了進度條的百分比。