HTML5視頻和音頻標(biāo)籤詳解：構(gòu)建響應(yīng)式視頻播放器

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

核心要點(diǎn)

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

標(biāo)記

在處理完容器、編解碼器和許可問(wèn)題後，我們來(lái)研究一下video元素及其相關(guān)屬性的標(biāo)記。

在網(wǎng)頁(yè)中包含HTML5視頻最簡(jiǎn)單的方法如下：

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

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

與img元素類(lèi)似，video元素也可以包含width和height屬性：

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

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

width和height屬性?xún)H接受整數(shù)，其值始終為像素。當(dāng)然，這些值可以通過(guò)腳本或CSS覆蓋。

啟用原生控件

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

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

controls是一個(gè)布爾屬性，因此不需要值。它在標(biāo)記中的包含告訴瀏覽器使控件對(duì)用戶(hù)可見(jiàn)且可訪問(wèn)。

每個(gè)瀏覽器都負(fù)責(zé)內(nèi)置視頻控件的外觀。圖5.1和圖5.2顯示了這些控件在不同瀏覽器中的外觀差異。

autoplay屬性

我們很想忽略這個(gè)屬性，因?yàn)樵诖蠖鄶?shù)情況下使用它都是不可取的；但是，在某些情況下它可能是合適的。布爾型autoplay屬性完全符合其名稱(chēng)的含義：它告訴網(wǎng)頁(yè)盡快播放視頻。

通常情況下，這是一種不好的做法；我們大多數(shù)人都知道，如果網(wǎng)站在加載時(shí)就開(kāi)始播放視頻或音頻，尤其是當(dāng)我們的揚(yáng)聲器音量調(diào)大時(shí)，這會(huì)多麼令人惱火。可用性最佳實(shí)踐規(guī)定，網(wǎng)頁(yè)上的聲音和運(yùn)動(dòng)應(yīng)該只在用戶(hù)請(qǐng)求時(shí)觸發(fā)。但這並不意味著永遠(yuǎn)不應(yīng)該使用autoplay屬性。

例如，如果相關(guān)的頁(yè)面只包含一個(gè)視頻——也就是說(shuō)，用戶(hù)點(diǎn)擊鏈接到某個(gè)頁(yè)面只是為了觀看特定視頻——那麼它可以自動(dòng)播放，具體取決於視頻的大小、周?chē)鷥?nèi)容、觀看平臺(tái)和受眾。

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

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

警告：移動(dòng)瀏覽器忽略autoplay

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

loop屬性

另一個(gè)在使用前應(yīng)該三思而後行的可用屬性是布爾型loop屬性。同樣，它也很容易理解：根據(jù)規(guī)範(fàn)，此屬性將告訴瀏覽器“在到達(dá)媒體資源末尾時(shí)返回到媒體資源的開(kāi)頭”。

因此，如果您創(chuàng)建了一個(gè)網(wǎng)頁(yè)，其唯一目的是讓訪問(wèn)者感到厭煩，它可能包含如下代碼：

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

自動(dòng)播放和無(wú)限循環(huán)！我們只需要?jiǎng)h除原生控件，就可以得到最糟糕做法的三重奏。

當(dāng)然，與autoplay一樣，在某些情況下loop也很有用：例如，一個(gè)基於瀏覽器的遊戲中，當(dāng)頁(yè)面打開(kāi)時(shí)，環(huán)境聲音和音樂(lè)應(yīng)該連續(xù)播放。

preload屬性

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

• auto：表示視頻及其關(guān)聯(lián)的元數(shù)據(jù)將在視頻播放前開(kāi)始加載。這樣，瀏覽器就可以在用戶(hù)請(qǐng)求時(shí)更快地開(kāi)始播放視頻。
• none：表示視頻不應(yīng)該在用戶(hù)按下播放按鈕之前在後臺(tái)加載。
• metadata：與none類(lèi)似，但即使視頻本身不會(huì)加載，任何與視頻相關(guān)的元數(shù)據(jù)（例如，其尺寸、持續(xù)時(shí)間等）也可以預(yù)加載。

preload屬性在省略時(shí)沒(méi)有規(guī)範(fàn)定義的默認(rèn)值；每個(gè)瀏覽器都會(huì)決定這三個(gè)值中的哪一個(gè)應(yīng)該是默認(rèn)狀態(tài)。這是有道理的，因?yàn)樗试S在良好連接的臺(tái)式機(jī)瀏覽器上自動(dòng)預(yù)加載視頻和/或元數(shù)據(jù)，而不會(huì)產(chǎn)生任何實(shí)際的不利影響；但它允許移動(dòng)瀏覽器默認(rèn)為metadata或none，因?yàn)樵S多移動(dòng)用戶(hù)具有受限帶寬，並且更願(yuàn)意選擇是否下載視頻。

poster屬性

當(dāng)您嘗試在網(wǎng)絡(luò)上觀看視頻時(shí)，通常會(huì)顯示視頻的單個(gè)幀以提供其內(nèi)容的預(yù)告。 poster屬性使選擇此類(lèi)預(yù)告變得容易。此屬性與src類(lèi)似，將通過(guò)URL指向服務(wù)器上的圖像文件。

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

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

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

muted屬性

muted屬性（布爾型）控制video元素音頻軌道的默認(rèn)狀態(tài)。

添加此屬性將導(dǎo)致視頻的音頻軌道默認(rèn)為靜音，這可能會(huì)覆蓋任何用戶(hù)偏好。這只會(huì)控制元素的默認(rèn)狀態(tài)——用戶(hù)與控件或JavaScript交互可以更改此狀態(tài)。

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

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

在以前版本的HTML5規(guī)範(fàn)中，有一個(gè)名為audio的屬性，它取值為muted。新的muted屬性替換了現(xiàn)在已過(guò)時(shí)的audio屬性。

添加對(duì)多種視頻格式的支持

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

為了實(shí)現(xiàn)完全的瀏覽器支持，以下是聲明source元素的方法：

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

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

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

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

您會(huì)注意到，type屬性的語(yǔ)法已略微修改以適應(yīng)容器和編解碼器值。圍繞值使用的雙引號(hào)已更改為單引號(hào)，並且另一組嵌套的雙引號(hào)專(zhuān)門(mén)用於編解碼器。

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

注意：您需要哪些格式？

根據(jù)您網(wǎng)站的目標(biāo)受眾，您可能不需要三個(gè)source元素來(lái)獲得完整的瀏覽器支持。對(duì)視頻和音頻編解碼器和容器的支持非常好，您可能只需要一兩種組合。要幫助您決定使用哪些格式，請(qǐng)務(wù)必查看Can I use上的最新瀏覽器支持信息。

源順序

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

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

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

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

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

為了保持優(yōu)雅降級(jí)的原則，video元素的設(shè)計(jì)使得舊版瀏覽器可以通過(guò)其他方式訪問(wèn)視頻。任何無(wú)法識(shí)別video元素的瀏覽器都將簡(jiǎn)單地忽略它及其source子元素。但是，如果video元素包含瀏覽器識(shí)別為有效HTML的內(nèi)容，它將讀取並顯示該內(nèi)容。

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

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

我們將跳過(guò)詳細(xì)介紹這段新添加的代碼是如何工作的（畢竟這不是一本關(guān)於Flash的書(shū)?。?，但以下是一些關(guān)於此標(biāo)記添加的幾點(diǎn)需要注意的地方：

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

除了Flash後備內(nèi)容外，您還可以提供一個(gè)可選的下載視頻鏈接，允許用戶(hù)訪問(wèn)視頻的本地副本並在空閒時(shí)觀看。這將確保沒(méi)有人無(wú)法觀看視頻。

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

HTML5視頻和音頻標(biāo)記的常見(jiàn)問(wèn)題解答

什麼是HTML5視頻和音頻標(biāo)記？

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

為什麼我會(huì)收到“HTML5 video file not found”錯(cuò)誤？

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

如何為我的HTML5視頻添加註釋?zhuān)?

為HTML5視頻添加註釋包括在視頻上添加文本、形狀或其他元素，以提供更多信息或突出顯示視頻的某些部分。雖然HTML5不提供內(nèi)置註釋功能，但您可以使用JavaScript和CSS創(chuàng)建自定義註釋?；蛘撸梢允褂肰EED.IO等在線工具，這些工具提供易於使用的視頻註釋工具。

如何解決“HTML5 video file not found”錯(cuò)誤？

解決“HTML5 video file not found”錯(cuò)誤包括識(shí)別錯(cuò)誤的原因並解決它。如果文件路徑不正確，請(qǐng)更正它。如果文件已被刪除，請(qǐng)恢復(fù)它或?qū)⑵涮鎿Q為新文件。如果存在服務(wù)器問(wèn)題，請(qǐng)聯(lián)繫您的服務(wù)器管理員或託管提供商以尋求幫助。在某些情況下，視頻文件可能已損壞，在這種情況下，您需要修復(fù)或替換該文件。

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

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

如何修復(fù)損壞的HTML5視頻文件？

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

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

您可以通過(guò)在<video></video>標(biāo)籤中包含controls屬性來(lái)為HTML5視頻添加控件。此屬性會(huì)向視頻添加一組默認(rèn)控件，包括播放/暫停、音量和全屏按鈕。當(dāng)用戶(hù)將鼠標(biāo)懸停在視頻上時(shí)，控件會(huì)出現(xiàn)。

我可以自動(dòng)播放我的HTML5視頻嗎？

是的，您可以通過(guò)在<video></video>標(biāo)籤中包含autoplay屬性來(lái)自動(dòng)播放HTML5視頻。但是，請(qǐng)記住，許多瀏覽器會(huì)阻止帶有聲音的自動(dòng)播放視頻，以防止干擾用戶(hù)。為了確保您的視頻自動(dòng)播放，請(qǐng)考慮使用muted屬性使視頻靜音。

如何循環(huán)播放我的HTML5視頻？

您可以通過(guò)在<video></video>標(biāo)籤中包含loop屬性來(lái)循環(huán)播放HTML5視頻。此屬性會(huì)導(dǎo)致視頻在播放完畢後從開(kāi)頭重新開(kāi)始，從而創(chuàng)建一個(gè)連續(xù)循環(huán)。

我可以在HTML5視頻中播放多個(gè)源嗎？

是的，您可以通過(guò)在<video></video>標(biāo)籤內(nèi)包含多個(gè)<source></source>標(biāo)籤來(lái)為HTML5視頻指定多個(gè)源。瀏覽器將使用它能夠播放的第一個(gè)源。這允許您為不同的瀏覽器提供多種視頻格式，以實(shí)現(xiàn)最大的兼容性。

以上是HTML5視頻和音頻：標(biāo)記-SitePoint的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！