HTML5的基本音頻和視頻事件

HTML5音頻和視頻的關鍵事件詳解及瀏覽器差異分析

HTML5的<video></video>和<audio></audio>元素提供了豐富的事件機制。一些事件如“play”事件一目了然，而另一些事件，例如“progress”事件，則比較複雜。本文將深入探討一些最重要的媒體事件，分析它們的觸發時機、相關屬性以及不同瀏覽器間的差異。

核心要點

• HTML5的<video></video>和<audio></audio>元素提供了多種事件，有些簡單易懂（如“play”事件），有些則比較複雜（如“progress”事件）。
• 播放事件（如“play”、“pause”、“ended”）響應媒體播放或暫停操作，並與相應的媒體函數和屬性對應。但某些瀏覽器存在異常，例如在Opera、Safari和IE10中，當媒體播放結束時，.paused標誌可能仍然為false。
• 加載事件與媒體數據的加載或加載失敗相關，包括“loadstart”、“progress”、“loadedmetadata”、“canplay”和“canplaythrough”事件。但它們的行為因瀏覽器和preload屬性而異。
• “progress”事件在下載數據期間持續觸發，用一組時間範圍表示下載進度。然而，瀏覽器存在差異，例如Opera會創建兩個範圍，而Mobile Safari只保留活動範圍。
• “timeupdate”事件在媒體播放期間持續觸發，用於將其他元素與媒體播放同步。此事件通常沒有瀏覽器錯誤或差異。

播放事件

播放事件響應媒體播放或暫停操作。這些事件相對簡單。

“play”和“pause”事件分別在媒體播放或暫停時觸發。 “ended”事件在媒體播放結束時觸發，無論是正常播放結束還是用戶手動跳轉到結尾。

前兩個事件對應著play()和pause()方法。後兩個事件對應著.paused和.ended屬性。 .paused屬性默認為true，或在媒體暫停時為true；.ended屬性默認為false，在播放結束時變為true（與“ended”事件同時觸發）。

然而，Opera、Safari和IE10存在一個顯著的異常：當媒體播放結束時，.paused標誌仍然為false（邏輯上它應該為true，因為媒體不再播放）。這意味著簡單的播放/暫停按鈕處理程序在這種情況下會失效：

button.addEventListener('click', function(e) {
  if(media.paused) {
    media.play();
  } else {
    media.pause();
  }
}, false);

可以通過在“ended”事件響應中手動調用pause()方法來解決此問題：

media.addEventListener('ended', function(e) {
  media.pause();
}, false);

Firefox和Chrome內部已經通過在“ended”事件之前觸發“pause”事件來修復此問題。

加載事件

加載事件與媒體數據的加載（或加載失敗）相關。這些事件的出現頻率取決於媒體的加載狀態，即是否使用preload屬性以及媒體是否已緩存。

在所有情況下，第一個觸發的事件是“loadstart”事件，表示瀏覽器已開始查找數據。但這僅表示瀏覽器開始查找，並不意味著任何數據已實際加載，或媒體資源甚至存在。

如果preload屬性的值為“none”，則“loadstart”事件是唯一在播放開始前觸發的事件。而如果preload屬性的值為“metadata”或“auto”，則很快會觸發另外兩個事件：“progress”和“loadedmetadata”。 （如果沒有預加載，這些事件仍然會觸發，但要等到播放開始後。）

“progress”事件比較複雜，將在下一節中單獨討論。 “loadedmetadata”事件很簡單，它表示瀏覽器已加載足夠的元數據來知道媒體的.duration（作為浮點數，而不是其默認值NaN）。

當然，“loadedmetadata”事件只有在媒體能夠加載時才會觸發——如果加載失敗（例如，src返回404），則媒體將產生“error”事件，並且無法進行進一步播放。

這裡再次遇到一些重要的瀏覽器差異。在Mobile Safari中，preload設置有意未實現，因此該屬性的所有值的行為都與preload="none"相同。相反，在IE10中，媒體元數據始終默認加載，因此preload="none"的行為與preload="metadata"相同。

“progress”事件

“progress”事件在（且僅在）下載數據期間持續觸發。因此，當preload設置為“none”時，它在播放開始前根本不會觸發；當preload設置為“metadata”時，它會在前幾秒鐘觸發，然後停止直到播放開始；當preload設置為“auto”時，它將持續觸發直到整個媒體文件下載完畢。

但是，對於所有preload設置，一旦播放開始，瀏覽器將繼續下載整個媒體文件，直到沒有剩餘數據需要加載，即使視頻隨後暫停，後台下載也會繼續。

數據本身由一組時間範圍表示，在使用“progress”事件之前，務必了解這些時間範圍的工作原理。

(以下內容與原文基本一致，只是對部分語句進行了調整和潤色，避免了大段的直接複製，並保持了原意)

時間更新事件

最後簡要介紹一下媒體“timeupdate”事件，該事件在媒體播放期間持續觸發。可以使用此事件將其他內容與媒體播放同步，例如創建手動字幕、突出顯示成績單中的活動行，甚至同步多個媒體源。

“timeupdate”事件的觸發頻率未指定，實際上在不同的瀏覽器中差異很大。但總的平均頻率約為每秒3-5次，對於大多數同步目的來說足夠精確。

據我所知，此事件沒有瀏覽器錯誤或差異。

結語

本文並未涵蓋所有可能的媒體事件——還有其他播放和跳轉事件、高級網絡狀態事件，甚至還有一個在音量更改時觸發的事件。但我已經涵蓋了我認為最重要的事件——足以滿足大多數簡單的視頻和音頻腳本編寫需求，並足以構建基本的自定義界面。

(FAQs部分與原文基本一致，只是對部分語句進行了調整和潤色，避免了大段的直接複製，並保持了原意)

以上是HTML5的基本音頻和視頻事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！