97精品超碰一区二区三区,av片在线观看免费光看高清

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

標記

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

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

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

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

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

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

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

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

啟用原生控件

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

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

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

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

HTML5 Video and Audio: The Markup - SitePoint

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

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

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

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

autoplay屬性

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

通常情況下，這是一種不好的做法；我們大多數(shù)人都知道，如果網(wǎng)站在加載時就開始播放視頻或音頻，尤其是當我們的揚聲器音量調(diào)大時，這會多么令人惱火?？捎眯宰罴褜嵺`規(guī)定，網(wǎng)頁上的聲音和運動應該只在用戶請求時觸發(fā)。但這并不意味著永遠不應該使用autoplay屬性。

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

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

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

警告：移動瀏覽器忽略autoplay

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

loop屬性

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

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

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

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

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

preload屬性

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

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

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

poster屬性

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

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

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

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

muted屬性

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

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

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

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

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

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

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

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

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

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

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

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

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

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

注意：您需要哪些格式？

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

源順序

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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