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

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

學習目標

閱讀本文後,您將能夠:

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

複製文章連結

什麼是 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 的更多資訊