HTML5 是 HTML 的最新版本。與以前的 HTML 版本不同，HTML5 使開發人員能夠使用視訊標籤輕鬆將視訊新增到網頁中。
閱讀本文後，您將能夠：
複製文章連結
HTML5 是超文字標記語言 (HTML) 的最新版本，它是一種用於格式化網際網路內容的編碼語言。所有網頁都使用 HTML 來告訴瀏覽器如何顯示其內容。與早期版本的 HTML 相比，HTML5 具有許多額外的功能，其中之一就是將視訊新增到網頁的能力。其他 HTML5 功能包括對 SVG 圖形的支援、用於定義網站導覽的標籤以及標頭和頁尾標籤。
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 構建的網站可能使用幾種不同的串流通訊協定來播放視訊，包括 HTTP 即時串流 (HLS) 和 MPEG-DASH。這是在伺服器端設定的，而不是在 HTML 標記代碼中設定。
所有主要瀏覽器都支援 HTML5，這意味著它們可以解譯不屬於早期 HTML 版本的 HTML5 標籤。但是，並非所有瀏覽器都支援 HTML5 的所有功能。開發人員必須記住，某些使用者可能擁有無法解譯 HTML5 視訊元素的過時版瀏覽器。
在 2008 年 HTML5 發佈之前，視訊通常是使用 Adobe Flash 外掛程式嵌入的。HTML5 使開發人員只需使用幾個 HTML 標籤就可以在網頁上嵌入視訊，無需外掛程式。因此，Flash 變得沒那麼必要了，Adobe 最終在 2020 年 12 月 31 日停止了對 Flash 的支援。
如今，大多數使用者無需額外的瀏覽器外掛程式即可串流處理視訊，開發人員可以使用多種方法嵌入視訊而無需依賴外掛程式。HTML5 視訊元素是最常用的方法之一。
瀏覽器外掛程式是一種軟體，它為瀏覽器新增了原本不包含的功能。過去的情況是瀏覽器不包括播放視訊的能力。Adobe Flash 等第三方外掛程式有助於填補這一空白。
但是，外掛程式也可能帶來安全威脅。它們在瀏覽器和網站帶來的攻擊面之上增加另一個攻擊面（即外部攻擊者入侵瀏覽工作階段的另一種方式）。此外，外掛程式可能會減慢頁面功能。依賴外掛程式意味著多個軟體必須正常且快速地工作才能載入網頁，而不僅僅是一個。
如果視訊是原生嵌入的（這在 HTML5 中是可能的），它會載入得更快。避免使用外掛程式也更安全。
Cloudflare Stream 是一個集視訊編碼、儲存、傳遞和播放於一體的視訊點播平台。請參閱 Cloudflare Stream 文件，瞭解如何將視訊檔案上傳到 Stream 並將它們嵌入網頁。或者，在開始之前瞭解有關 Cloudflare Stream 的更多資訊。