你已正確準備影片檔案供網頁使用。您已提供正確的尺寸和解析度。甚至為不同的瀏覽器建立了不同的 WebM 和 MP4 檔案。
如要讓所有人都能觀看影片，您仍需將影片加入網頁。如要正確執行這項操作，您必須新增兩個 HTML 元素：<video> 元素和 <source> 元素。除了這些標記的基本概念外，本文也會說明應新增至這些標記的屬性，以便打造優質的使用者體驗。
指定單一檔案
您可以單獨使用影片元素，但我們不建議這麼做。請一律使用 type 屬性，如下所示。瀏覽器會使用這個值，判斷是否能播放所提供的影片檔案。如果無法偵測，系統會顯示內文。
<video src="chrome.webm" type="video/webm">
<p>Your browser cannot play the provided video file.</p>
</video>
指定多種檔案格式
請參閱「媒體檔案基礎知識」一文，瞭解並非所有瀏覽器都支援相同的影片格式。<source> 元素可讓您指定多種格式做為備用選項，以防使用者的瀏覽器不支援其中一種格式。
以下範例會產生嵌入式影片，並在本文稍後的範例中使用。
<video controls>
<source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
<source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
<p>Your browser cannot play the provided video file.</p>
</video>
請務必在 <source> 標記事件中加入 type 屬性 (屬性為選用)。這可確保瀏覽器只下載可播放的檔案。
這種做法比提供不同的 HTML 或伺服器端指令碼更有優勢，特別是在行動裝置上：
- 您可以依照偏好列出格式。
- 用戶端切換可縮短延遲時間，因為只需要提出一次要求即可取得內容。
- 讓瀏覽器選擇格式比使用伺服器端支援資料庫 (搭配使用者代理程式偵測) 更簡單、更快速，且可能更可靠。
- 指定每個檔案來源類型可提升網路效能；瀏覽器不必將部分影片下載至「窺探」格式，就能選取影片來源。
在行動裝置環境中，這些問題尤其重要，因為頻寬和延遲時間都很寶貴，使用者也可能不耐煩。如果有多個來源含有不支援的類型，省略 type 屬性可能會影響效能。
您可以透過幾種方式深入瞭解詳細資料。請參閱適合 Geeks 的數位媒體 Primer，進一步瞭解視訊和音訊在網路上的運作原理。您也可以在開發人員工具中使用遠端偵錯功能，比較網路活動「含有類型屬性」和「不含類型屬性」的情況。
設定開始和結束時間
節省頻寬並讓網站更有回應：使用媒體片段為影片元素新增開始和結束時間。
如要使用媒體片段，請在媒體網址中加入 #t=[start_time][,end_time]。舉例來說，如要播放影片的 5 到 10 秒，請指定：
<source src="video/chrome.webm#t=5,10" type="video/webm">
您也可以在 <hours>:<minutes>:<seconds> 中指定時間。舉例來說，#t=00:01:05 會從影片播放 1 分 5 秒後開始播放。如要只播放影片的前 1 分鐘，請指定 #t=,00:01:00。
您可以使用這項功能，在同一部影片中提供多個檢視畫面 (就像 DVD 中的 cue point)，而無須對多個檔案進行編碼和提供服務。
如要讓這項功能順利運作，您的伺服器必須支援範圍要求，且必須啟用該功能。大部分的伺服器預設會啟用範圍要求。由於部分代管服務已關閉，因此您應確認網站上是否有範圍要求可用。
好消息是，您可以在瀏覽器開發人員工具中執行這項操作。舉例來說，在 Chrome 中，這是在網路面板中。請找出 Accept-Ranges 標頭，並確認標頭顯示 bytes。在這張圖片中，我繪製了這個標題周圍的紅色方塊。如果值並非 bytes，您必須與代管服務供應商聯絡。
加入代表圖片
在 video 元素中加入海報屬性，讓觀眾在元素載入後就能瞭解內容，無須下載影片或開始播放。
<video poster="poster.jpg" ...>
…
</video>
如果影片 src 損毀，或系統不支援任何提供的影片格式，則可改用海報。海報圖片唯一的缺點是額外的檔案要求，會消耗一些頻寬，且需要轉譯。詳情請參閱「提高圖片編碼效率」。
確保影片不會溢出容器
如果影片元素太大，可能會溢出容器，導致使用者無法查看內容或使用控制項。
您可以使用 CSS 控制影片尺寸。如果 CSS 不符合您的所有需求，即使針對 YouTube 和其他來源的影片，JavaScript 程式庫和 FitVids 等外掛程式也能提供協助。很抱歉，這些資源可能會增加網路酬載大小，對您的收益和使用者錢包造成負面影響。
針對我這裡所述的簡單用途，請使用 CSS 媒體查詢，根據檢視區域尺寸指定元素大小；max-width:
100% 就是您的好幫手。
如果是 iframe 中的媒體內容 (例如 YouTube 影片)，請嘗試使用回應式做法 (例如 John Surdakowski 提出的方法)。
CSS
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML
<div class="video-container">
<iframe
src="//www.youtube.com/embed/l-BA9Ee2XuM"
frameborder="0"
width="560"
height="315"
></iframe>
</div>
比較回應範例和非回應版本。如您所見，無回應的版本無法提供良好的使用者體驗。
裝置螢幕方向
電腦螢幕或筆記型電腦不受裝置方向影響，但如果要考量行動裝置和平板電腦的網頁設計，裝置方向就非常重要。
iPhone 上的 Safari 非常適合在直向和橫向螢幕方向之間切換：
iPad 和 Android 版 Chrome 的裝置方向可能會發生問題。舉例來說，如果沒有任何自訂項目，在 iPad 上以橫向模式播放的影片會如下所示：
使用 CSS 設定影片 width: 100% 或 max-width: 100%，即可解決許多裝置方向版面配置問題。
自動播放
autoplay 屬性可控制瀏覽器是否立即下載及播放影片。具體運作方式取決於平台和瀏覽器。
Chrome：取決於多項因素，包括但不限於使用者是否在電腦上觀看內容，以及行動使用者是否已將你的網站或應用程式加入主畫面。詳情請參閱自動播放最佳做法。
Firefox：封鎖所有影片和音訊，但使用者可以針對所有網站或特定網站放寬這些限制。詳情請參閱「允許或禁止在 Firefox 中自動播放媒體」
Safari：過去需要使用者手勢，但在近期版本中已放寬這項規定。詳情請參閱 iOS 適用的新 <video> 政策。
即使平台上支援自動播放功能，您仍需考量是否要啟用自動播放功能：
- 數據用量可能相當高昂。
- 在使用者想要播放媒體之前就開始播放，可能會佔用頻寬和 CPU，進而延遲網頁轉譯作業。
- 當使用者在播放影片或音訊時，可能會造成乾擾。
預先載入
preload 屬性會向瀏覽器提供提示，說明要預先載入多少資訊或內容。
| 值 | 說明 |
|---|---|
none |
使用者可能會選擇不觀看影片，因此請勿預先載入任何內容。 |
metadata |
中繼資料 (時間長度、尺寸、文字軌) 應預先載入，但只需少量的影片。 |
auto |
會立即下載整部影片。空字串也會產生相同的結果。 |
preload 屬性在不同平台上會產生不同的效果。舉例來說，Chrome 會在電腦上緩衝 25 秒的影片，但 iOS 或 Android 則不會。也就是說，行動裝置可能會發生播放啟動延遲的情形，但電腦版不會。詳情請參閱「透過音訊和影片預先載入功能加快播放速度」或 Steve Souders 的網誌。
瞭解如何在網頁中加入媒體後，現在就來學習媒體無障礙功能，瞭解如何為聽障人士或無法播放音訊時，在影片中加入字幕。