HTML5視頻和音頻：標記-SitePoint

HTML5視頻和音頻標籤詳解：構建響應式視頻播放器

本文節選自Alexis Goldstein、Louis Lazaris和Estelle Weyl合著的《HTML5 & CSS3 for the Real World, 2nd Edition》一書。本書在全球各大書店有售，您也可以在此處購買電子書版本。

核心要點

• HTML5的視頻和音頻標記允許直接在HTML代碼中嵌入視頻和音頻元素，無需外部插件或播放器。
• HTML5視頻和音頻標記包含多個屬性來控制這些元素的行為，例如autoplay（自動播放）、controls（控件）、loop（循環）、muted（靜音）和source（源）。
• “HTML5 video file not found”（HTML5視頻文件未找到）錯誤通常發生在瀏覽器無法找到或訪問video標籤的source屬性中指定的視頻文件時。
• HTML5本身不提供視頻內置標註功能，但可以使用JavaScript和CSS創建自定義標註。
• 通過在video標籤內包含多個source標籤，可以為HTML5視頻指定多個源，從而最大限度地兼容不同的瀏覽器。

標記

在處理完容器、編解碼器和許可問題後，我們來研究一下video元素及其相關屬性的標記。

在網頁中包含HTML5視頻最簡單的方法如下：

<video src="example.webm"></video>

正如前面幾節所述，這僅在有限的瀏覽器中有效。然而，這是使HTML5視頻在某種程度上工作的最小代碼。在一個理想的世界裡，它應該在任何地方都能工作——就像img元素一樣——但這還需要一段時間。

與img元素類似，video元素也可以包含width和height屬性：

<video height="280" src="example.webm" width="375"></video>

儘管可以在標記中設置尺寸，但這不會影響視頻的縱橫比。例如，如果前面示例中的視頻實際上是375×240，而標記如所示，則視頻將在指定的280像素空間內垂直居中。這可以防止視頻過度拉伸並顯得失真。

width和height屬性僅接受整數，其值始終為像素。當然，這些值可以通過腳本或CSS覆蓋。

啟用原生控件

任何嵌入式視頻都少不了讓用戶能夠播放、暫停、停止、快進快退或調整音量。 HTML5的video元素包含一個controls屬性，它可以做到這一點：

<video src="example.webm" width="375" height="280" controls></video>

controls是一個布爾屬性，因此不需要值。它在標記中的包含告訴瀏覽器使控件對用戶可見且可訪問。

每個瀏覽器都負責內置視頻控件的外觀。圖5.1和圖5.2顯示了這些控件在不同瀏覽器中的外觀差異。

圖5.1. Chrome中的原生視頻控件

圖5.2. Firefox中的原生視頻控件

圖5.3. Internet Explorer中的原生視頻控件

圖5.4. Opera中的原生視頻控件

autoplay屬性

我們很想忽略這個屬性，因為在大多數情況下使用它都是不可取的；但是，在某些情況下它可能是合適的。布爾型autoplay屬性完全符合其名稱的含義：它告訴網頁盡快播放視頻。

通常情況下，這是一種不好的做法；我們大多數人都知道，如果網站在加載時就開始播放視頻或音頻，尤其是當我們的揚聲器音量調大時，這會多麼令人惱火。可用性最佳實踐規定，網頁上的聲音和運動應該只在用戶請求時觸發。但這並不意味著永遠不應該使用autoplay屬性。

例如，如果相關的頁面只包含一個視頻——也就是說，用戶點擊鏈接到某個頁面只是為了觀看特定視頻——那麼它可以自動播放，具體取決於視頻的大小、周圍內容、觀看平台和受眾。

以下是使用此屬性的方法：

<video src="example.webm"></video>

警告：移動瀏覽器忽略autoplay

許多（如果不是全部）移動瀏覽器都會忽略autoplay屬性，因此視頻總是會在用戶按下播放按鈕後才會開始播放。考慮到移動帶寬通常有限且昂貴，這是合理的。

loop屬性

另一個在使用前應該三思而後行的可用屬性是布爾型loop屬性。同樣，它也很容易理解：根據規範，此屬性將告訴瀏覽器“在到達媒體資源末尾時返回到媒體資源的開頭”。

因此，如果您創建了一個網頁，其唯一目的是讓訪問者感到厭煩，它可能包含如下代碼：

<video height="280" src="example.webm" width="375"></video>

自動播放和無限循環！我們只需要刪除原生控件，就可以得到最糟糕做法的三重奏。

當然，與autoplay一樣，在某些情況下loop也很有用：例如，一個基於瀏覽器的遊戲中，當頁面打開時，環境聲音和音樂應該連續播放。

preload屬性

與前面討論的兩個屬性相比，preload屬性在許多情況下都非常方便。 preload屬性接受三個值之一：

• auto：表示視頻及其關聯的元數據將在視頻播放前開始加載。這樣，瀏覽器就可以在用戶請求時更快地開始播放視頻。
• none：表示視頻不應該在用戶按下播放按鈕之前在後台加載。
• metadata：與none類似，但即使視頻本身不會加載，任何與視頻相關的元數據（例如，其尺寸、持續時間等）也可以預加載。

preload屬性在省略時沒有規範定義的默認值；每個瀏覽器都會決定這三個值中的哪一個應該是默認狀態。這是有道理的，因為它允許在良好連接的台式機瀏覽器上自動預加載視頻和/或元數據，而不會產生任何實際的不利影響；但它允許移動瀏覽器默認為metadata或none，因為許多移動用戶具有受限帶寬，並且更願意選擇是否下載視頻。

poster屬性

當您嘗試在網絡上觀看視頻時，通常會顯示視頻的單個幀以提供其內容的預告。 poster屬性使選擇此類預告變得容易。此屬性與src類似，將通過URL指向服務器上的圖像文件。

以下是帶有poster屬性的video元素：

<video src="example.webm"></video>

如果省略poster屬性，則默認“海報”將是視頻的第一幀，該幀將在加載後立即顯示。

muted屬性

muted屬性（布爾型）控制video元素音頻軌道的默認狀態。

添加此屬性將導致視頻的音頻軌道默認為靜音，這可能會覆蓋任何用戶偏好。這只會控制元素的默認狀態——用戶與控件或JavaScript交互可以更改此狀態。

將其添加到我們的video元素中：

<video height="280" src="example.webm" width="375"></video>

在以前版本的HTML5規範中，有一個名為audio的屬性，它取值為muted。新的muted屬性替換了現在已過時的audio屬性。

添加對多種視頻格式的支持

正如我們所討論的，目前沒有辦法使用單個容器格式來提供您的視頻，儘管這確實是video元素背後的理念，也是我們希望在不久的將來實現的目標。為了包含多種視頻格式，video元素允許定義source元素，以便您可以允許每個瀏覽器使用其選擇的格式顯示視頻。這些元素與video元素上的src屬性具有相同的功能，因此如果您提供source元素，則無需為video元素指定src。

為了實現完全的瀏覽器支持，以下是聲明source元素的方法：

<video src="example.webm" width="375" height="280" controls></video>

source元素（奇怪的是）帶有一個src屬性，該屬性指定視頻文件的位置。它還接受一個type屬性，該屬性指定所請求資源的容器格式。此後一個屬性使瀏覽器能夠確定它是否可以播放相關文件，從而防止它不必要地下載不受支持的格式。

type屬性還允許指定編解碼器參數，該參數定義所請求文件的視頻和音頻編解碼器。以下是帶有指定編解碼器的source元素：

<video src="example.webm"></video>

您會注意到，type屬性的語法已略微修改以適應容器和編解碼器值。圍繞值使用的雙引號已更改為單引號，並且另一組嵌套的雙引號專門用於編解碼器。

乍一看這可能有點令人困惑，但在大多數情況下，一旦您有了編碼視頻的一套方法（我們將在本章後面討論），您只需複制粘貼這些值即可。重要的是，您為指定文件定義正確的值，以確保瀏覽器可以確定它可以播放哪個（如果有）文件。

注意：您需要哪些格式？

根據您網站的目標受眾，您可能不需要三個source元素來獲得完整的瀏覽器支持。對視頻和音頻編解碼器和容器的支持非常好，您可能只需要一兩種組合。要幫助您決定使用哪些格式，請務必查看Can I use上的最新瀏覽器支持信息。

源順序

三個source元素作為video元素的子元素放置，使用的瀏覽器將選擇它識別的任何容器/編解碼器格式——只下載它需要的資源並忽略其他資源。聲明了三個文件格式後，我們的代碼現在如下所示：

<video height="280" src="example.webm" width="375"></video>

您會注意到，我們的代碼現在沒有video元素上的src屬性。如前所述，除了冗餘之外，包含它還會覆蓋source元素中定義的任何視頻文件，因此在這種情況下必須將其省略。

不支持HTML5視頻的瀏覽器怎麼辦？

我們video元素中包含的三個source元素將涵蓋所有現代瀏覽器，但我們尚未確保我們的視頻將在舊版瀏覽器中播放。如前所述，您可能仍然有相當一部分用戶使用不支持HTML5視頻的瀏覽器。這些用戶中的大多數都在Internet Explorer 9之前的某個版本上。

為了保持優雅降級的原則，video元素的設計使得舊版瀏覽器可以通過其他方式訪問視頻。任何無法識別video元素的瀏覽器都將簡單地忽略它及其source子元素。但是，如果video元素包含瀏覽器識別為有效HTML的內容，它將讀取並顯示該內容。

我們可以為那些不支持的瀏覽器提供什麼內容？根據Adobe的數據，超過10億台式機用戶在其係統上安裝了Flash Player插件。而且這些Flash插件實例中的大多數都是9版或更高版本，它們支持MPEG-4視頻容器格式。考慮到這一點，為了允許Internet Explorer 8及更早版本（以及其他不支持HTML5視頻的舊版瀏覽器）播放我們的視頻，我們可以聲明一個嵌入式Flash視頻作為後備。以下是The HTML5 Herald上視頻的完整代碼，其中包含Flash後備代碼：

<video src="example.webm" width="375" height="280" controls></video>

我們將跳過詳細介紹這段新添加的代碼是如何工作的（畢竟這不是一本關於Flash的書！），但以下是一些關於此標記添加的幾點需要注意的地方：

• object元素上的width和height屬性應與video元素上的屬性相同。
• 為了播放文件，我們使用LongTail Video的開源JW Player，它可免費用於非商業用途，但您可以使用任何您喜歡的視頻播放器。
• Flash視頻代碼有它自己的後備——如果Flash視頻代碼無法工作，則顯示圖像文件。
• 第四個param元素定義要使用的文件（example.mp4）。如前所述，現在大多數Flash播放器實例都支持使用MPEG-4容器格式播放視頻，因此無需編碼其他視頻格式。
• 支持HTML5視頻的HTML5啟用瀏覽器會按照規範指示忽略video元素內不是source標籤的任何內容，因此後備在所有瀏覽器中都是安全的。

除了Flash後備內容外，您還可以提供一個可選的下載視頻鏈接，允許用戶訪問視頻的本地副本並在空閒時觀看。這將確保沒有人無法觀看視頻。

這裡最後要提到的一點是，與額外的source元素一樣，您的網站上可能沒有來自不支持HTML5視頻瀏覽器的訪問者，或者您可能並不關心使用舊版瀏覽器的少量用戶。在這兩種情況下，您可以輕鬆地省略Flash後備內容，從而簡化代碼。

HTML5視頻和音頻標記的常見問題解答

什麼是HTML5視頻和音頻標記？

HTML5視頻和音頻標記是HTML5中引入的一項功能，它允許您將視頻和音頻元素直接嵌入到HTML代碼中。這消除了對外部插件或播放器的需求，為用戶提供了無縫的多媒體體驗。該標記由<video></video>和<audio></audio>標籤以及一些屬性組成，這些屬性允許您控制這些元素的行為，例如autoplay、controls、loop、muted和source。

為什麼我會收到“HTML5 video file not found”錯誤？

“HTML5 video file not found”錯誤通常發生在瀏覽器無法找到或訪問<video></video>標籤的source屬性中指定的視頻文件時。這可能是由於多種原因造成的，例如文件路徑不正確、文件刪除或服務器問題。確保文件路徑正確且視頻文件可訪問以解決此錯誤。

如何為我的HTML5視頻添加註釋？

為HTML5視頻添加註釋包括在視頻上添加文本、形狀或其他元素，以提供更多信息或突出顯示視頻的某些部分。雖然HTML5不提供內置註釋功能，但您可以使用JavaScript和CSS創建自定義註釋。或者，您可以使用VEED.IO等在線工具，這些工具提供易於使用的視頻註釋工具。

如何解決“HTML5 video file not found”錯誤？

解決“HTML5 video file not found”錯誤包括識別錯誤的原因並解決它。如果文件路徑不正確，請更正它。如果文件已被刪除，請恢復它或將其替換為新文件。如果存在服務器問題，請聯繫您的服務器管理員或託管提供商以尋求幫助。在某些情況下，視頻文件可能已損壞，在這種情況下，您需要修復或替換該文件。

為什麼我的HTML5視頻在Firefox中無法播放？

如果您的HTML5視頻在Firefox中無法播放，可能是由於多種原因造成的。 Firefox可能不支持<video></video>標籤的source屬性中指定的視頻格式。瀏覽器也可能由於安全或隱私設置而阻止視頻。檢查視頻格式和瀏覽器設置以解決此問題。

如何修復損壞的HTML5視頻文件？

修復損壞的HTML5視頻文件包括使用視頻修復工具。這些工具會分析損壞的文件，並嘗試修復任何阻止文件正確播放的錯誤或問題。一些流行的視頻修復工具包括Stellar Video Repair和Wondershare Repairit。

如何在我的HTML5視頻中添加控件？

您可以通過在<video></video>標籤中包含controls屬性來為HTML5視頻添加控件。此屬性會向視頻添加一組默認控件，包括播放/暫停、音量和全屏按鈕。當用戶將鼠標懸停在視頻上時，控件會出現。

我可以自動播放我的HTML5視頻嗎？

是的，您可以通過在<video></video>標籤中包含autoplay屬性來自動播放HTML5視頻。但是，請記住，許多瀏覽器會阻止帶有聲音的自動播放視頻，以防止干擾用戶。為了確保您的視頻自動播放，請考慮使用muted屬性使視頻靜音。

如何循環播放我的HTML5視頻？

您可以通過在<video></video>標籤中包含loop屬性來循環播放HTML5視頻。此屬性會導致視頻在播放完畢後從開頭重新開始，從而創建一個連續循環。

我可以在HTML5視頻中播放多個源嗎？

是的，您可以通過在<video></video>標籤內包含多個<source></source>標籤來為HTML5視頻指定多個源。瀏覽器將使用它能夠播放的第一個源。這允許您為不同的瀏覽器提供多種視頻格式，以實現最大的兼容性。

以上是HTML5視頻和音頻：標記-SitePoint的詳細內容。更多資訊請關注PHP中文網其他相關文章！