資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用 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 格式的影片將被忽略。
365 次瀏覽
