現在，我們已經習慣于将簡單的圖像添加到網頁中，下一步是開始向HTML文檔添加視訊和音頻播放器！在本文中，我們将介紹如何使用
<視訊>
元素來做到這一點;然後，我們将通過檢視如何為您的視訊添加隐藏式字幕/字幕來結束。
| 先決條件： | 基本的計算機知識，安裝的基本軟體，處理檔案的基本知識，熟悉HTML基礎知識 |
| 目的： | 了解如何将視訊和音頻内容嵌入到網頁中，以及如何為視訊添加字幕/字幕。 |
網絡上的視訊和音頻
自2000年代初以來，Web開發人員一直希望在Web上使用視訊和音頻，當時我們開始擁有足夠快的帶寬來支援任何類型的視訊（視訊檔案比文本甚至圖像大得多）。在早期，HTML等原生Web技術沒有在Web上嵌入視訊和音頻的能力，是以像Flash（兩者現在都已過時） - 在處理此類内容方面變得流行起來。這種技術工作正常，但它存在許多問題，包括不能很好地與HTML / CSS功能配合使用，安全問題和可通路性問題。
如果正确實作，本機解決方案将解決大部分問題。幸運的是，幾年後，HTML5規範添加了這樣的功能，[
包括
](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video)和``元素，以及一些用于控制它們的閃亮的新JavaScript API。我們不會在這裡看JavaScript - 隻是HTML可以實作的基本基礎。
我們不會教你如何制作音頻和視訊檔案 - 這需要完全不同的技能。我們為您提供了示例音頻和視訊檔案以及示例代碼，供您自己進行實驗，以防您無法掌握自己的實驗。
注意：在開始之前，您還應該知道有相當多的OVP（線上視訊提供商）如YouTube等線上音頻提供商。這些公司提供了一種友善，簡單的方法來托管和消費視訊，是以您不必擔心巨大的帶寬消耗。OVP甚至通常提供現成的代碼，用于在網頁中嵌入視訊/音頻;如果您使用該路線，則可以避免我們在本文中讨論的一些困難。我們将在下一篇文章中進一步讨論這種服務。
<視訊>元素
<視訊>
元素使您可以非常輕松地嵌入視訊。一個非常簡單的例子看起來像這樣：
<video src="rabbit320.webm" controls>
<p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
</video> 複制到剪貼闆
值得注意的功能是：
-
src
與`元素一樣，（source） 屬性包含要嵌入的視訊的路徑。它以完全相同的方式工作。src`
-
controls
使用者必須能夠控制視訊和音頻播放（這對于癫痫患者 建構您的接口。接口至少必須包括一種啟動和停止媒體以及調整音量的方法。
controls
- 标簽内的段落
<video>
這稱為回退内容 - 如果通路頁面的浏覽器不支援該元素，則會顯示此内容，進而允許我們為較舊的浏覽器提供回退。這可以是你喜歡的任何東西;在本例中，我們提供了指向視訊檔案的直接連結，是以無論使用者使用哪種浏覽器，使用者至少都可以以某種方式通路它。
<video>
嵌入式視訊将如下所示：
使用多種源格式提高相容性
上面的例子有一個問題，如果你試圖使用較舊的浏覽器（如Internet Explorer甚至舊版本的Safari）通路上面的實時連結，你可能已經注意到了。視訊無法播放，因為不同的浏覽器支援不同的視訊（和音頻）格式。幸運的是，您可以采取一些措施來幫助防止這成為問題。
媒體檔案的内容
首先，讓我們快速浏覽一下術語。MP3，MP4和WebM等格式稱為容器格式。它們定義了一個結構，其中存儲了構成媒體的音頻和/或視訊軌道，以及描述媒體的中繼資料，用于對其通道進行編碼的編解碼器等。
包含電影的WebM檔案，除了英語評論軌道的音頻外，還具有主視訊軌道和一個備用角度軌道，以及英語和西班牙語的音頻，可以概念化如下圖所示。還包括包含劇情片隐藏式字幕的文本軌道，電影的西班牙語字幕和評論的英語字幕。
容器中的音頻和視訊軌道以用于對該媒體進行編碼的編解碼器的相應格式儲存資料。音軌與視訊軌道使用不同的格式。每個音軌都使用音頻編解碼器進行編碼。正如我們之前所讨論的，不同的浏覽器支援不同的視訊和音頻格式，以及不同的容器格式（如MP3，MP4和WebM，它們反過來可以包含不同類型的視訊和音頻）。
例如：
- WebM容器通常将Vorbis或Opus音頻與VP8 / VP9視訊打包在一起。所有現代浏覽器都支援此功能，但舊版本可能不起作用。
- MP4 容器通常将 AAC 或 MP3 音頻與 H.264 視訊打包在一起。所有現代浏覽器以及Internet Explorer也支援此功能。
- Ogg容器傾向于使用Vorbis音頻和Theora視訊。這在Firefox和Chrome中得到了最好的支援，但基本上已被品質更好的WebM格式所取代。
有一些特殊情況。例如，對于某些類型的音頻，編解碼器的資料通常存儲在沒有容器或簡化容器的情況下。一個這樣的執行個體是FLAC編解碼器，它最常存儲在FLAC檔案中，這些檔案隻是原始的FLAC軌道。
另一種情況是始終流行的MP3檔案。“MP3檔案”實際上是存儲在MPEG或MPEG-2容器中的MPEG-1音頻層III（MP3）音軌。這特别有趣，因為雖然大多數浏覽器不支援在
<視訊>
元素，但由于MP3的普及，它們可能仍然支援MP3。
音頻播放器傾向于直接播放音軌，例如MP3或Ogg檔案。這些不需要容器。
浏覽器中的媒體檔案支援
注意：我們為什麼會有這個問題？事實證明，幾種流行的格式，如MP3和MP4 / H.264，非常出色，但受到專利的阻礙;也就是說，有些專利涵蓋了它們所基于的部分或全部技術。在美國，專利涵蓋MP3直到2017年，H.264至少在2027年之前一直受到專利的阻礙。
由于這些專利，希望實作對這些編解碼器的支援的浏覽器必須支付通常巨大的許可費。此外，有些人喜歡避免使用受限制的軟體，而更喜歡隻使用開放格式。由于這些法律和優惠原因，Web開發人員發現自己必須支援多種格式才能捕獲整個閱聽人。
上一節中描述的編解碼器的存在是為了将視訊和音頻壓縮為可管理的檔案，因為原始音頻和視訊都非常大。每個Web浏覽器都支援各種編解碼器，如Vorbis或H.264，用于将壓縮的音頻和視訊轉換為二進制資料并傳回。每個編解碼器都有自己的優點和缺點，每個容器也可能提供自己的積極和消極功能，影響您決定使用哪種編解碼器。
事情變得稍微複雜一些，因為每個浏覽器不僅支援一組不同的容器檔案格式，而且每個浏覽器還支援不同的編解碼器選擇。為了最大限度地提高您的網站或應用程式在使用者浏覽器上運作的可能性，您可能需要以多種格式提供您使用的每個媒體檔案。如果您的站點和使用者的浏覽器不共享共同的媒體格式，則您的媒體将無法播放。
由于確定應用的媒體在您希望通路的每個浏覽器、平台和裝置組合中都可檢視的複雜性，是以選擇編解碼器和容器的最佳組合可能是一項複雜的任務。請參閱在媒體容器格式（檔案類型）以幫助選擇要用于您的内容和目标閱聽人的第一個媒體編解碼器。
要記住的另一件事是：移動浏覽器可能支援其桌面等效項不支援的其他格式，就像它們可能不支援桌面版本支援的所有相同格式一樣。最重要的是，桌面和移動浏覽器*都可能*設計為解除安裝媒體播放的處理（适用于所有媒體或僅針對内部無法處理的特定類型）。這意味着媒體支援部分取決于使用者安裝的軟體。
那麼我們該怎麼做呢？看看下面更新的示例）：
<video controls>
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video> 複制到剪貼闆
在這裡，我們從實際的`
元素，并播放它具有編解碼器支援的第一個元素。包括WebM和MP4源應該足以在大多數平台和浏覽器上播放您的視訊。src`
每個元素還有一個 [
type
](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-type) 屬性。這是可選的，但建議您包括它。該屬性包含 由 指定的檔案的 MIME 類型，浏覽器可以使用 立即跳過他們不了解的視訊。如果未包含，浏覽器将加載并嘗試播放每個檔案，直到找到一個有效的檔案，這顯然需要時間，并且是不必要的資源使用。
<source>
type
<source>
type
type
其他<視訊>功能
在顯示 HTML 視訊時，還可以包括許多其他功能。請看我們的下一個示例：
<video controls width="400" height="400"
autoplay loop muted preload="auto"
poster="poster.png">
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>Your browser doesn't support HTML video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video> 複制到剪貼闆
生成的 UI 如下所示：
新功能包括：
-
寬度
您可以使用這些屬性或 CSS 控制視訊大小。在這兩種情況下，視訊都保持其原生的寬高比-寬高比，稱為寬高比。如果設定的大小未保持寬高比，則視訊将增大以水準填充空間，并且預設情況下，未填充的空間将僅具有純色背景色。
-
autoplay
使音頻或視訊立即開始播放，同時加載頁面的其餘部分。建議您不要在您的網站上使用自動播放視訊（或音頻），因為使用者可能會發現它真的很煩人。
-
loop
使視訊（或音頻）在完成時再次開始播放。這也可能很煩人，是以僅在真正必要時使用。
-
muted
使媒體在預設情況下關閉聲音的情況下播放。
-
poster
将在播放視訊之前顯示的圖像的 URL。它旨在用于初始螢幕或廣告螢幕。
-
preload
用于緩沖大檔案;它可以采用以下三個值之一：
"none"
不緩沖檔案
"auto"
緩沖媒體檔案
"metadata"
僅緩沖檔案的中繼資料
請注意，我們尚未在實時版本中包含該屬性 - 如果視訊在頁面加載後立即開始播放，則您看不到海報！
autoplay
<音頻>元素
<音頻>
元素類似，但有一些細微的差異，如下所述。一個典型的例子可能如下所示：
<audio controls>
<source src="viper.mp3" type="audio/mp3">
<source src="viper.ogg" type="audio/ogg">
<p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio> 複制到剪貼闆
這會在浏覽器中生成類似于以下内容的内容：
這比視訊播放器占用的空間更少，因為沒有視覺元件 - 您隻需要顯示控件即可播放音頻。與HTML視訊的其他差別如下：
- `
height
- 它也不支援該屬性 - 同樣，沒有可視元件。
poster
除此之外，還支援所有與 — 相同的功能 — 檢視上述部分以擷取有關它們的更多資訊。
<audio>
<video>
顯示視訊字幕資訊
現在，我們将讨論一個稍微進階的概念，這個概念确實很有用。許多人不能或不想聽到他們在網絡上找到的音頻/視訊内容，至少在某些時候是這樣。例如：
- 許多人有聽覺障礙（如聽力障礙或耳聾），是以根本聽不清音頻。
- 其他人可能無法聽到音頻，因為他們處于嘈雜的環境中（例如播放體育比賽時擁擠的酒吧）。
- 同樣，在播放音頻會分散注意力或中斷的環境中（例如在圖書館中或當伴侶試圖睡覺時），擁有字幕可能非常有用。
- 不會說視訊語言的人可能需要文本腳本甚至翻譯，以幫助他們了解媒體内容。
能夠為這些人提供音頻/視訊中所說單詞的腳本不是很好嗎？好吧，多虧了HTML視訊，你可以。為此，我們使用WebVTT元素。
注意：“轉錄”的意思是“将口語寫成文本”。生成的文本是“腳本”。
WebVTT是一種用于編寫包含多個文本字元串的文本檔案以及中繼資料（例如視訊中應顯示每個文本字元串的時間，甚至是有限的樣式/定位資訊）的格式。這些文本字元串稱為提示，并且有幾種用于不同目的的提示。最常見的提示是：
- 字幕
外國材料的翻譯，适用于不了解音頻中所說的單詞的人。
- 字幕
同步對話的轉錄或重要聲音的描述，讓聽不到音頻的人了解正在發生的事情。
- 定時描述
媒體播放器應說出的文本，以便向盲人或其他視力受損的使用者描述重要的視覺效果。
典型的 WebVTT 檔案将如下所示：
WEBVTT
1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.
2
00:00:30.739 --> 00:00:34.074
This is the second.
... 複制到剪貼闆
要使其與 HTML 媒體播放一起顯示，您需要：
- 将其另存為檔案，放在合理的位置。
.vtt
- 連結到包含 `
<track>
<audio>
<video>
<source>
subtitles
captions
descriptions
下面是一個示例：
<video controls>
<source src="example.mp4" type="video/mp4">
<source src="example.webm" type="video/webm">
<track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Spanish">
</video> 複制到剪貼闆
這将導緻顯示字幕的視訊，如下所示：
有關更多詳細資訊，包括如何添加标簽，。此示例使用一些 JavaScript 來允許使用者在不同的字幕之間進行選擇。請注意，要打開字幕，您需要按“CC”按鈕并選擇一個選項 - 英語，德語或西班牙語。
注意：文本軌道還可以幫助您進行SEO，因為搜尋引擎在文本上尤其繁榮。文本軌道甚至允許搜尋引擎直接連結到視訊中途的某個位置。
主動學習：嵌入您自己的音頻和視訊
對于這種主動學習，我們（理想情況下）希望您走向世界并錄制一些自己的視訊和音頻 - 如今，大多數手機都允許您非常輕松地錄制音頻和視訊，并且隻要您可以将其傳輸到計算機上，就可以使用它。您可能需要進行一些轉換才能在視訊的情況下使用WebM和MP4，在音頻的情況下使用MP3和Ogg，但是有足夠的程式可以讓您在沒有太多麻煩的情況下執行此操作，例如Miro Video Converter。我們希望您嘗試一下！
如果您無法擷取任何視訊或音頻，則可以随意使用我們的示例音頻和視訊檔案來執行此練習。您還可以使用我們的示例代碼作為參考。
- 将音頻和視訊檔案儲存在計算機上的新目錄中。
- 在同一目錄中建立一個新的 HTML 檔案，名為 。
index.html
- 将
<音頻>
- 為元素提供一張海報，該海報将在視訊開始播放之前顯示。享受建立自己的海報圖形的樂趣。
<video>