H5中video的事件的觸發順序是怎樣的？

王铁柱6發表於2024-12-11
H5IDE事件

H5 video 元素的事件觸發順序比較複雜，會根據網路狀況、使用者互動等因素而變化。以下列出一些關鍵事件及其大致的觸發順序，並解釋一些容易混淆的情況：

1. 載入階段:

  • loadstart: 影片開始載入時觸發。這是第一個觸發的事件。
  • durationchange: 影片時長資訊獲取到後觸發。可能在 loadedmetadata 之前或之後觸發，取決於瀏覽器和影片格式。
  • loadedmetadata: 獲取到影片後設資料（例如時長、尺寸、軌道資訊）後觸發。
  • loadeddata: 第一幀資料載入完成，可以開始播放，但未必能流暢播放。
  • progress: 正在載入資料時週期性地觸發。可以透過該事件跟蹤載入進度。
  • canplay: 可以播放影片，但可能需要緩衝才能流暢播放。
  • canplaythrough: 可以流暢播放影片，無需緩衝。
  • loadeddata: 影片資料已載入。

2. 播放階段:

  • playing: 影片開始播放或從暫停狀態恢復播放時觸發。 注意，play 事件先於 playing 觸發。
  • play: 呼叫 play() 方法後觸發，表示開始播放影片的指令已發出，但此時影片可能還未真正開始播放。
  • waiting: 影片由於需要緩衝下一幀而暫停播放時觸發。
  • timeupdate: 當前播放時間改變時週期性地觸發。
  • pause: 影片暫停時觸發。
  • ended: 影片播放結束時觸發。

3. 其他事件:

  • seeking: 開始跳轉到新的播放位置時觸發。
  • seeked: 跳轉到新的播放位置完成時觸發。
  • ratechange: 播放速率改變時觸發。
  • volumechange: 音量改變時觸發。
  • error: 發生錯誤時觸發。

容易混淆的事件:

  • play vs. playing: play 是呼叫 play() 方法後立即觸發，表示播放指令已發出；playing 是影片實際開始播放後觸發。
  • canplay vs. canplaythrough: canplay 表示可以播放，但可能需要緩衝；canplaythrough 表示可以流暢播放，無需緩衝。
  • loadeddata vs. canplay: loadeddata 表示已載入足夠的資料可以開始播放，canplay 表示可以播放，但未必流暢。canplay 通常在 loadeddata 之後觸發。

示例程式碼 (監聽關鍵事件):

const video = document.getElementById('myVideo');

video.addEventListener('loadstart', () => console.log('loadstart'));
video.addEventListener('loadedmetadata', () => console.log('loadedmetadata'));
video.addEventListener('loadeddata', () => console.log('loadeddata'));
video.addEventListener('canplay', () => console.log('canplay'));
video.addEventListener('canplaythrough', () => console.log('canplaythrough'));
video.addEventListener('play', () => console.log('play'));
video.addEventListener('playing', () => console.log('playing'));
video.addEventListener('pause', () => console.log('pause'));
video.addEventListener('ended', () => console.log('ended'));
video.addEventListener('waiting', () => console.log('waiting'));
video.addEventListener('timeupdate', () => console.log('timeupdate'));
video.addEventListener('seeking', () => console.log('seeking'));
video.addEventListener('seeked', () => console.log('seeked'));

實際的觸發順序可能會因為網路狀況、影片格式、瀏覽器等因素而有所不同。 透過監聽這些事件，可以更好地控制影片播放過程，並提供更友好的使用者體驗。 建議根據實際需求選擇需要監聽的事件。

相關文章