#main-nav-header { display:none; }

HTML5 視訊如何運作？| HTML 視訊

HTML5 是 HTML 的最新版本。與以前的 HTML 版本不同，HTML5 使開發人員能夠使用視訊標籤輕鬆將視訊新增到網頁中。

學習目標

閱讀本文後，您將能夠：

定義 HTML5
描述 HTML5 如何在沒有外掛程式的情況下實現串流
瞭解如何使用 HTML5 視訊元素

想要繼續瞭解嗎？

訂閱 TheNET，這是 Cloudflare 每月對網際網路上最流行見解的總結！

複製文章連結

什麼是 HTML5?

HTML5 是超文字標記語言 (HTML) 的最新版本，它是一種用於格式化網際網路內容的編碼語言。所有網頁都使用 HTML 來告訴瀏覽器如何顯示其內容。與早期版本的 HTML 相比，HTML5 具有許多額外的功能，其中之一就是將視訊新增到網頁的能力。其他 HTML5 功能包括對 SVG 圖形的支援、用於定義網站導覽的標籤以及標頭和頁尾標籤。

HTML5 視訊元素如何運作？

HTML5 視訊元素透過指定視訊檔案的位置，告訴瀏覽器從另一個來源載入視訊檔案，這與瀏覽量載入影像檔案的方法類似（影像本身並不儲存在 HTML 檔案中，瀏覽器從其他地方抽取影像）。還可以包含寬度、高度和其他屬性來告訴瀏覽器如何顯示視訊。其他標記代碼可以告訴瀏覽器將其放置在頁面的哪個位置。

HTML5 視訊標籤是 <video>，與其他 HTML 元素相似，該標籤使用 </video> 來閉合。

在這兩個標籤之間，有一個 <source> 標籤來表明視訊檔案的位置。在這個標籤中，視訊來源 (src) 和檔案類型 (type) 是按以下方式表示的：


<video>
  <source src="example.mp4"type="video/mp4">
</video>

以下重要屬性也可以放在 <video> 標籤內：

寬度：這以像素指定視訊的寬度。像素的數量用雙引號引起來： width="370"
高度：這指定視訊的高度。它的運作方式與寬度屬性相似。
播放、暫停、音量：這些控制項讓使用者能夠控制視訊播放。將 controls 新增到 <video> 標籤以包含它們。

視訊的備用來源也可以放在 <video> 標籤之間，以防瀏覽器不支援第一種檔案格式。瀏覽器始終使用列出的第一個來源。

此外，文字可以放在 <video> 標籤之間；只有當使用者的瀏覽器不支援 HTML5 視訊時，才會顯示該文字。

把所有這些放在一起，嵌入視訊的 HTML5 代碼可能看起來是這樣的：


<video controls width="370" height="130">
  <source src="example.mp4"type="video/mp4">
  <source src="alternate-example.webm"type="video/webm">
Your browser does not support HTML5 video.
</video>

還可以在視訊元素中使用其他一些屬性，例如 autoplay（用於在頁面載入時立即播放視訊）、loop（用於迴圈播放視訊）、muted（用於靜音視訊）和 poster（用於在視訊載入前顯示一張影像）。Mozilla 為這些屬性提供了不錯的文件記錄。

HTML5 使用什麼串流通訊協定？

HTML5 本身不是串流通訊協定。使用 HTML5 構建的網站可能使用幾種不同的串流通訊協定來播放視訊，包括 HTTP 即時串流 (HLS) 和 MPEG-DASH。這是在伺服器端設定的，而不是在 HTML 標記代碼中設定。

是否所有瀏覽器都支援 HTML5？

所有主要瀏覽器都支援 HTML5，這意味著它們可以解譯不屬於早期 HTML 版本的 HTML5 標籤。但是，並非所有瀏覽器都支援 HTML5 的所有功能。開發人員必須記住，某些使用者可能擁有無法解譯 HTML5 視訊元素的過時版瀏覽器。

在 HTML5 之前，網站如何包含視訊內容？

在 2008 年 HTML5 發佈之前，視訊通常是使用 Adobe Flash 外掛程式嵌入的。HTML5 使開發人員只需使用幾個 HTML 標籤就可以在網頁上嵌入視訊，無需外掛程式。因此，Flash 變得沒那麼必要了，Adobe 最終在 2020 年 12 月 31 日停止了對 Flash 的支援。

如今，大多數使用者無需額外的瀏覽器外掛程式即可串流處理視訊，開發人員可以使用多種方法嵌入視訊而無需依賴外掛程式。HTML5 視訊元素是最常用的方法之一。

什麼是瀏覽器外掛程式？

瀏覽器外掛程式是一種軟體，它為瀏覽器新增了原本不包含的功能。過去的情況是瀏覽器不包括播放視訊的能力。Adobe Flash 等第三方外掛程式有助於填補這一空白。

但是，外掛程式也可能帶來安全威脅。它們在瀏覽器和網站帶來的攻擊面之上增加另一個攻擊面（即外部攻擊者入侵瀏覽工作階段的另一種方式）。此外，外掛程式可能會減慢頁面功能。依賴外掛程式意味著多個軟體必須正常且快速地工作才能載入網頁，而不僅僅是一個。

如果視訊是原生嵌入的（這在 HTML5 中是可能的），它會載入得更快。避免使用外掛程式也更安全。

如何嵌入 Cloudflare Stream 視訊？

Cloudflare Stream 是一個集視訊編碼、儲存、傳遞和播放於一體的視訊點播平台。請參閱 Cloudflare Stream 文件，瞭解如何將視訊檔案上傳到 Stream 並將它們嵌入網頁。或者，在開始之前瞭解有關 Cloudflare Stream 的更多資訊。