使用 HTML5 影片時常用的影片格式


<video> HTML 元素將支援影片播放的媒體播放器嵌入到文件中。您也可以將 <video> 用於音訊內容,但 <audio> 元素可能會提供更合適的使用者體驗。

HTML5 <video> 標籤是一個很棒的補充。它使您能夠在所有最新瀏覽器中本地播放影片,而無需依賴 Flash 等外掛。它使硬體能夠訪問不支援 Flash 的網路影片。此外,它使以前無法在網路上播放的編解碼器能夠播放。

讓我們深入瞭解本文,進一步討論使用 HTML5 影片時常用的影片格式。

什麼是 Web 格式?

有些瀏覽器可以原生播放三種不同的影片格式。不幸的是,並非所有瀏覽器都支援所有格式,因此,如果您希望獲得有用的 HTML5 影片支援,則必須至少實現兩種不同的格式。您至少需要 MP4 + H.264,以及 AAC 或 MP3。在 Safari、Chrome 和 IE9(Vista/Windows 7)中,MP4 影片可以原生播放。

對於其他瀏覽器,請使用 WebM + VP8 或 Ogg + Theora 以及 Vorbis 音訊。Ogg 與 Firefox(3.5+)、Chrome(3+)和 Opera(10.54+)相容,而 WebM 與 Firefox(4+)、Chrome(6+ 或 Chromium)和 Opera(10.60+)相容。

讓我們看看不同影片格式的瀏覽器支援情況 -

瀏覽器

MP4

WebM

Ogg

Chrome

Safari

Firefox

Opera

如何使用 HTML5 影片格式

在 HTML 5 出現之前,沒有建立用於在您的網站上顯示影片的框架。您可以使用 HTML5 影片將影片元素引入您的瀏覽器。透過替換物件的一些元件,它可以提高觀看者的注意力和興奮度。隨著這項新技術的開發,將可以線上顯示影片,而無需使用任何外掛。

以下是 HTML 影片及其媒體型別的表格。

檔案格式

媒體型別

MP4

Video/mp4

WebM

Video/webm

Ogg

Video/ogg

為了更清晰地瞭解使用 HTML5 影片時常用的影片格式,讓我們看看以下示例。

示例

在以下示例中,我們正在播放 Ogg 影片格式。

<!DOCTYPE html>
<html>
   <body>
      <h1>Using Ogg format</h1>
      <video width="320" height="240" autoplay>
         <source src="https://file-examples.com/storage/fe8c7eef0c6364f6c9504cc/2018/04/file_example_OGG_480_1_7mg.ogg" type="video/ogg">
      </video>
   </body>
</html>

輸出

當指令碼執行時,它將生成一個輸出,其中包含上傳到網頁上的影片,該影片為 Ogg 格式,並具有自動播放屬性,這會導致頁面載入時影片自動開始播放。

示例

考慮以下示例,我們使用的是 MP4 格式。

<!DOCTYPE html>
<html>
   <body>
      <h1>Using MP4 format</h1>
      <video width="320" height="240" autoplay>
         <source src="https://static.videezy.com/system/resources/previews/000/055/884/original/201118-CountdownChristmas.mp4" type="video/mp4">
      </video>
   </body>
</html>

輸出

執行上述指令碼後,它將生成一個輸出,其中包含上傳到網頁上的 MP4 格式影片,該影片具有自動播放屬性,這會導致頁面載入時影片自動開始播放。

示例

檢視以下示例,其中我們使用了多個源元素,瀏覽器將使用第一個識別的格式 -

如果任何格式載入失敗,此情況將很有幫助,其他格式將作為備份工作。

<!DOCTYPE HTML>
<html>
   <body>
      <video width = "300" height = "200" controls autoplay>
         <source src = "/html5/foo.ogg" type = "video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         Your browser does not support the video element.
      </video>
   </body>
</html>

輸出

當指令碼執行時,它將生成一個輸出,其中包含在網頁上以 MP4 格式顯示的影片,因為瀏覽器首先識別 MP4 格式,因此 Ogg 格式的影片被忽略。

更新時間: 2023年10月11日

365 次檢視

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.