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

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

核心要點

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

播放事件

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

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

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

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

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

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

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

Firefox和Chrome內(nèi)部已經(jīng)通過在“ended”事件之前觸發(fā)“pause”事件來修復(fù)此問題。

加載事件

加載事件與媒體數(shù)據(jù)的加載（或加載失?。┫嚓P(guān)。這些事件的出現(xiàn)頻率取決於媒體的加載狀態(tài)，即是否使用preload屬性以及媒體是否已緩存。

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

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

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

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

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

“progress”事件

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

但是，對於所有preload設(shè)置，一旦播放開始，瀏覽器將繼續(xù)下載整個媒體文件，直到?jīng)]有剩餘數(shù)據(jù)需要加載，即使視頻隨後暫停，後臺下載也會繼續(xù)。

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

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

時間更新事件

最後簡要介紹一下媒體“timeupdate”事件，該事件在媒體播放期間持續(xù)觸發(fā)?？梢允褂么耸录⑵渌麅?nèi)容與媒體播放同步，例如創(chuàng)建手動字幕、突出顯示成績單中的活動行，甚至同步多個媒體源。

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

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

結(jié)語

本文並未涵蓋所有可能的媒體事件——還有其他播放和跳轉(zhuǎn)事件、高級網(wǎng)絡(luò)狀態(tài)事件，甚至還有一個在音量更改時觸發(fā)的事件。但我已經(jīng)涵蓋了我認為最重要的事件——足以滿足大多數(shù)簡單的視頻和音頻腳本編寫需求，並足以構(gòu)建基本的自定義界面。

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

以上是HTML5的基本音頻和視頻事件的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！