Web - 第十一章 | HTML 中的視頻和音頻

這邊看完這篇文章後，沒想到在網頁中加入視頻和音頻，居然有這麼多需要注意的部分，不管是在視頻上的Type和格式以及瀏覽器支援的問題，這些我以前都沒有想過；還有音頻可以加入字幕⋯等等太多了。哈，真的是學海無涯。

web 中的音頻和視頻

現在我們可以輕鬆的為一張web網頁添加簡單的圖像，下一步是開始為HTML文件添加音頻和視頻的播放器。在這篇文章當中，我們會學習到 <video>和<audio>兩個標籤；然後我們還將會看看如何為你的視頻添加字幕。

web開發者們一直以來想在Web中使用音頻和視頻，自21世紀初以來，我們的帶寬開始能夠支持任意類型的視頻（視頻文件比文本和圖片要大的多）。在早些時候，傳統的web技術（如HTML ）不能夠在Web中嵌入音頻和視頻，所以一些像 Flash (後來有 Silverlight )的專利技術在處理這些內容上變得很受歡迎。這些技術能夠正常的工作，但是卻有著一系列的問題，包括無法很好的支持HTML/CSS特性、安全問題，以及可行性問題。

傳統的解決方案能夠解決許多這樣的問題，前提是它能夠正確的工作。幸運的是，幾年之後 HTML5標準提出，其中有許多的新特性，包括 <video>和 <audio>標籤，以及一些 JavaScript和APIs用於對其進行控制。在這裡，我們不討論有關JavaScript的問題，僅僅講解有關HTML的基礎。

了解一些OVPs (在線視頻提供商)例如 YouTube 、Dailymotion 、 Vimeo ,以及在線音頻提供商例如 Soundcloud。這些公司提供方便、簡單的方式來支持視頻，所以你不必擔心龐大的帶寬消耗。OVPS甚至提供現成的代碼用於為你的web網頁嵌入視頻/音頻。如果你使用那種服務，你便可以避免在這篇文章中我們將討論的一些難題。

<video>標籤

<video>允許你簡單的嵌入一段視頻。

1
2
3

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

• src
  同<img>標籤使用方式相同，src屬性指向你想要嵌入網頁當中的視頻資源，他們的使用方式完全相同。

• controls
  用戶必須能夠控制視頻和音頻的回放功能。你可以使用瀏覽器提供的控制接口，同時你也可以在JavaScript （JavaScript API）當中使用這些控制接口。至少，這些媒體應該包括開始和停止，以及調整音量的功能。

• <video> 標籤內的段落
  這個叫做後備內容 —當瀏覽器不支持<video>標籤的時候，它將會顯示出來，它使我們能夠對舊的瀏覽器做一些兼容處理。你可以添加任何後備內容，在這個例子中我們提供了一個指向這個視頻文件的連結，從而使用戶可以至少訪問到這個文件，而不會局限於瀏覽器的支持。

多格式支持

如果你嘗試使用像Safari 或者Internet Explorer 這些瀏覽器來瀏覽。視頻並不會播放，這是因為不同的瀏覽器對視頻格式的支持不同。

快速的了解一下術語。像MP3、MP4、WebM這些術語叫做容器格式。他們是用不同的方式來播放音頻或者視頻的—也就是說這些容器是用不同的音頻軌道、視頻軌道、元資料來呈現媒體文件的。

視頻和音頻都有不同的格式，如下:

• WebM 容器通常包括了 Ogg Vorbis 音頻和VP8/VP9 視頻。主要在FireFox 和Chrome 當中支持。
• MP4 容器通常包括 AAC 以及MP3 音頻和 H.264 視頻。主要在 Internet Explorer 和Safari 當中支持。
• 老式的 Ogg 容器往往支持 Ogg Vorbis 音頻和Ogg Theora 視頻。主要在 Firefox 和Chrome 當中支持，不過這個容器已經被更強大的WebM 容器所取代。

音頻播放器將會直接播放音頻文件,，例如MP3 和Ogg 文件。這些不需要容器。

你可以從這裡看到 音視頻編碼兼容表 音視頻編碼兼容表。此外，許多移動平台的瀏覽器能夠播放一些不支持的格式，但是它們用的卻是底層系統的媒體播放器。但這也僅是現在支持。

以上的格式主要用於將音頻和視頻壓縮成可管理的文件（原始的音頻和視頻文件非常大）。瀏覽器包含了不同的 Codecs ,，如Vorbis和H.264,，它們用來將已壓縮的音頻和視頻轉化成二進制數字。瀏覽器並不全支持相同的codecs，所以你得使用幾個不同格式的文件來兼容不同的瀏覽器。如果你使用的格式都得不到瀏覽器的支持，那麼媒體文件將不會播放。

MP3 (音頻格式)和MP4/H.264 (視頻格式)是被廣泛支持的兩種格式，並且質量良好。然而，他們卻有專利的阻礙— MP3的專利會持續到2017年，而H.264會持續到2027年早期。意思也就是說瀏覽器若想要支持這些格式，就得支付高額的費用。此外，許多人反對軟件技術壟斷，支持開放的格式。這就是為什麼我們需要準備不同的格式來兼容不同的瀏覽器。

我們該怎麼做呢？

1
2
3
4
5

<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屬性，瀏覽器會嘗試加載每一個文件，直到找到一個能正確播放的格式，這樣會消耗掉大量的時間和資源。

其他 <video> 特性

這裡有許多你可以用在 HTML5 <video> 上的特性

1
2
3
4
5
6
7

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

• width 和 height
  你可以用屬性控制視頻的尺寸，也可以用CSS來控制視頻尺寸。無論使用哪種方式，視頻都會保持它原始的長寬比—也叫做縱橫比。如果你設置的尺寸沒有保持視頻原始長寬比，那麼視頻邊框將會拉伸，而未被視頻內容填充的部分，將會顯示默認的背景顏色。

• autoplay
  這個屬性會使音頻和視頻內容立即播放，即使頁面的其他部分還沒有加載完全。建議不要應用這個屬性在你的網站上，因為用戶們會比較反感自動播放的媒體文件。

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

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

• poster
  這個屬性指向了一個圖像的URL，這個圖像會在視頻播放前顯示。通常用於粗略的預覽或者廣告。

• preload
  這個屬性被用來緩衝較大的文件，有3個值可選：

• • “none” ：不緩衝
• • “auto” ：頁面加載後緩存媒體文件
• • “metadata” ：僅緩衝文件的元資料

<audio>標籤

<audio>標籤與 <video>標籤的使用方式幾乎完全相同，有一些細微的差別比如下面的邊框不同

1
2
3
4
5

<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>標籤擁有的特性

顯示音軌文本

現在，我們將討論一個略微先進的概念，這個概念將會十分的有用。許多人不想（或者不能）聽到Web 上的音頻/視頻內容，至少在某些情況下是這樣的，比如：

• 許多人患有聽覺障礙（通常來說是很難聽清聲音的人，或者聾人），所以他們不能聽見音頻中的聲音。
• 另外的情況可能是由於人們並不能聽音頻，可能是因為他們在一個非常嘈雜的環境當中（比如在一個擁擠的酒吧內恰好趕上了球賽），也可能是由於他們並不想打擾到其他人（比如在一個十分安靜的地方，例如圖書館）。
• 有一些人他們不說音頻當中的語言，所以他們聽不懂，因此他們想要一個副本或者是翻譯來幫助他們理解媒體內容。

給那些聽不懂音頻語言的人們提供一個音頻內容的副本豈不是一件很棒的事情嗎？所以，感謝HTML5 <video>使之成為可能，有了WebVTT 格式，你可以使用 <track>標籤。

“副本”的意思是指，用文本記錄下音頻的內容。

WebVTT是一個格式，用來編寫文本文件，這個文本文件包含了眾多的字符串，這些字符串會帶有一些元資料，它們可以用來描述這個字符串將會在視頻中顯示的時間，甚至可以用來描述這些字符串的樣式以及定位訊息。這些字符串叫做 cues，你可以根據不同的需求來顯示不同的樣式，最常見的如下：

• subtitle
  通過添加翻譯字幕，來幫助那些聽不懂外國語言的人們理解音頻當中的內容。

• captions
  同步翻譯對白，或是描述一些有重要訊息的聲音，來幫助那些不能聽音頻的人們理解音頻中的內容。

• timed descriptions
  將文字轉換為音頻，用於服務那些有視覺障礙的人。

一個典型的 WebVTT 文件

1
2
3
4
5
6
7
8
9
10
11

WEBVTT

1
00:00:22.230 --> 00:00:24.606
第一段字幕

2
00:00:30.739 --> 00:00:34.074
第二段

  ...

讓其與HTML 媒體一起顯示，你需要做如下工作：

• 以.vtt 後綴名保存文件。
• 用<track>標籤連結.vtt文件， <track> 標籤需放在 <audio> 或 <video> 標籤當中，同時需要放在所有<source>標籤之後。使用 kind屬性來指明是哪一種類型，如subtitles 、 captions 、 descriptions。然後，使用 srclang來告訴瀏覽器你是用什麼語言來編寫的subtitles。

1
2
3
4
5

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

文本軌道會使你的網站更容易被搜索引擎抓取到（SEO），由於搜索引擎的文本抓取能力非常強大，使用文本軌道甚至可以讓搜索引擎通過視頻的內容直接連結。

這邊轉載了大量的文章和內容，但是每個部分我都有實際去做過，並了解過。這邊轉載主要是做筆記記錄。

註：以上參考了
MDN web docs 的 Video and audio content 文章。