《30分鐘重學HTML》之嵌入-視頻與音頻（六）

⚡️ 預警，前方高能：

在本文中，若出現如下 emoji 表情包請特別留意:

• 白色書籤：🔖，表明一級標題；
• 橙色大四邊形：🔶，表明二級標題；
• 藍色小四邊形：🔹，表明三級標題；
• 黃色閃電：⚡️，表明強調；

🔖 1、視頻

<video> 元素 用於在 HTML 文檔中嵌入媒體播放器，支持文檔內的視頻播放。

你也能夠將 <video> 標籤用於音頻內容，可是<audio>元素可能在用戶體驗上更合適。

🔶 1.1 Video 標籤屬性

舉個 🌰 子：

<video
       src="rabbit320.webm"
       controls
       width="400"
       height="400"
       autoplay
       loop
       muted
       poster="poster.png"
       >
  <p>你的瀏覽器不支持 HTML5 視頻。可點擊<a href="rabbit320.mp4">此連接</a>觀看</p>
</video>
複製代碼

解析：

• src

  同 <img>標籤使用方式相同。提供視頻資源的 URL。

• controls

  Gecko 會提供用戶控制，容許用戶控制視頻的播放，包括音量，跨幀，暫停/恢復播放。

• width,height

  能夠用屬性控制視頻的尺寸，也能夠用 CSS 來控制視頻尺寸。 不管使用哪一種方式，視頻都會保持它原始的長寬比 — 也叫作縱橫比。

  若是你設置的尺寸沒有保持視頻原始長寬比，那麼視頻邊框將會拉伸，而未被視頻內容填充的部分，將會顯示默認的背景顏色。

• autoplay

  這個屬性會使音頻和視頻內容當即播放，即便頁面的其餘部分尚未加載徹底。

• loop

  這個屬性可讓音頻或者視頻文件循環播放。一樣不建議使用，除非有必要。

• muted

  這個屬性會致使媒體播放時，默認關閉聲音。

• poster

  指向一個圖像的 URL，這個圖像會在視頻播放前顯示。一般用於粗略的預覽或者廣告。

• preload

  用來緩衝較大的文件，有 3 個值可選：

  • "none" ：不緩衝
  • "auto" ：頁面加載後緩存媒體文件
  • "metadata" ：僅緩衝文件的元數據

• 在 <video></video> 標籤中間的內容，是針對瀏覽器不支持此元素時候的降級處理。

  這個叫作後備內容 — 當瀏覽器不支持 <video> 標籤的時候，就會顯示這段內容，這使得咱們可以對舊的瀏覽器提供回退內容。你能夠添加任何後備內容，在這個例子中咱們提供了一個指向這個視頻文件的連接，從而使用戶至少能夠訪問到這個文件，而不會侷限於瀏覽器的支持。

🔶 1.2 使用多個播放源提供兼容性

舉個 🌰 子：

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的瀏覽器不支持 HTML5 視頻。可點擊<a href="rabbit320.mp4">此連接</a>觀看</p>
</video>
複製代碼

將 src 屬性從 <video> 標籤中移除。將它放在幾個單獨的標籤 <source> 當中。

在這個例子當中，瀏覽器將會檢查 <source> 標籤，而且播放第一個與其自身 codec 相匹配的媒體。你的視頻應當包括 WebM 和 MP4 兩種格式，這兩種在目前已經足夠支持大多數平臺和瀏覽器。

每一個 <source> 標籤頁含有一個 type 屬性，這個屬性是可選的，可是建議你添加上這個屬性 — 它包含了視頻文件的 MIME types ，同時瀏覽器也會經過檢查這個屬性來迅速的跳過那些不支持的格式。若是你沒有添加 type 屬性，瀏覽器會嘗試加載每個文件，直到找到一個能正確播放的格式，這樣會消耗掉大量的時間和資源。

🔖 2、音頻

🔶 2.1 audio 標籤

<audio> 標籤與 <video> 標籤的使用方式幾乎徹底相同，有一些細微的差異。

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>你的瀏覽器不支持 HTML5 音頻，可點擊<a href="viper.mp3">此連接</a>收聽。</p>
</audio>
複製代碼

音頻播放器所佔用的空間比視頻播放器要小，因爲它沒有視覺部件 — 你只須要顯示出能控制音頻播放的控件。

一些與 HTML5<video> 的差別以下：

<audio> 標籤不支持 width/height 屬性 — 由於其並無視覺部件，也就沒有能夠設置 width/height 的內容。 同時也不支持 poster 屬性 — 一樣由於沒有視覺部件。 除此以外，<audio> 標籤支持全部 <video> 標籤擁有的特性。

🔖 總結

• ✔️ 理解 HTML Video 標籤
• ✔️ 理解 HTML Audio 標籤

🔖 參考資料

• 視頻和音頻內容, developer.mozilla.org/zh-CN/docs/…
• <video>標籤, developer.mozilla.org/zh-CN/docs/…
• <audio>標籤, developer.mozilla.org/zh-CN/docs/…