(<影片>)、和 <source> 代碼

Derek Herman
Derek Herman
X GitHub
Joe Medley
Joe Medley
GitHub
Sam Dutton

你已正確準備影片檔案供網頁使用。您已提供正確的尺寸和解析度。甚至為不同的瀏覽器建立了獨立的 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>

在 Glitch 上試用

請務必在 <source> 標記事件中加入 type 屬性 (屬性為選用)。這可確保瀏覽器只下載可播放的檔案。

與提供不同 HTML 或伺服器端指令碼相比，這種做法有幾項優點，尤其是在行動裝置上：

  • 您可以依偏好順序列出格式。
  • 用戶端切換可縮短延遲時間，因為只需要提出一次要求即可取得內容。
  • 讓瀏覽器選擇格式比使用伺服器端支援資料庫搭配使用者代理程式偵測功能更簡單、更快速，且可能更可靠。
  • 指定每個檔案來源的類型可改善網路效能；瀏覽器可以選取影片來源，而無需下載部分影片來「嗅探」格式。

在行動裝置環境中，這些問題尤其重要，因為頻寬和延遲時間都很寶貴，使用者也可能不耐煩。如果有多個來源含有不支援的類型，省略 type 屬性可能會影響效能。

您可以透過幾種方式深入瞭解詳細資料。請參閱數位媒體入門指南，進一步瞭解影片和音訊在網路上的運作方式。您也可以在開發人員工具中使用遠端偵錯功能，比較網路活動含有類型屬性和不含類型屬性的情況。

設定開始和結束時間

節省頻寬並讓網站更有回應：使用媒體片段為影片元素新增開始和結束時間。

如要使用媒體片段，請在媒體網址中加入 #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 中，這項資訊位於「Network」面板。請找出 Accept-Ranges 標頭，並確認標頭顯示 bytes。在圖片中，我已在這個標頭周圍畫上紅色方框。如果值並非 bytes，您必須與代管服務供應商聯絡。

Chrome 開發人員工具螢幕截圖：Accept-Ranges: bytes。
Chrome 開發人員工具螢幕截圖：Accept-Ranges: bytes。

加入代表圖片

在 video 元素中加入海報屬性，讓觀眾在元素載入後就能瞭解內容，無須下載影片或開始播放。

<video poster="poster.jpg" ...>
  …
</video>

如果影片 src 損毀，或系統不支援任何提供的影片格式，則可改用海報。海報圖片唯一的缺點是額外的檔案要求，會消耗一些頻寬，且需要轉譯。詳情請參閱「提高圖片編碼效率」。

錯誤做法
沒有備用海報，影片就會顯示為損毀。
如果沒有備用海報，影片就會顯示為損毀。
正確做法
備用海報會讓系統認為已擷取第一個影格。
備用海報會讓系統假裝已擷取第一個影格。

確保影片不會溢出容器

如果影片元素太大，可能會溢出容器，導致使用者無法查看內容或使用控制項。

Android Chrome 螢幕截圖，直向模式：未設定樣式的影片元素溢出檢視區。
Android 版 Chrome 螢幕截圖，直向模式：未設定樣式的影片元素溢出檢視區。
Android Chrome 螢幕截圖，橫向模式：未設定樣式的影片元素溢出檢視區。
Android 版 Chrome 螢幕截圖，橫向模式：未設定樣式的影片元素溢出檢視區。

您可以使用 CSS 控制影片尺寸。如果 CSS 無法滿足所有需求，JavaScript 程式庫和外掛程式 (例如 FitVids) 可以提供協助，甚至可用於 YouTube 和其他來源的影片。很抱歉，這些資源可能會增加網路酬載大小，對您的收益和使用者錢包造成負面影響。

針對我這裡所述的簡單用途，請使用 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 在切換直向和橫向模式時表現良好：

在 iPhone 上使用 Safari 播放影片的螢幕截圖，直向模式。
iPhone 上 Safari 播放影片的螢幕截圖，直向模式。
螢幕截圖：iPhone 上 Safari 播放影片 (橫向模式)。
iPhone 上 Safari 播放影片的螢幕截圖，橫向模式。

iPad 和 Android 版 Chrome 的裝置方向可能會發生問題。舉例來說，如果沒有任何自訂項目，在 iPad 上以橫向模式播放的影片會如下所示：

在 iPad 上使用 Safari 播放影片的螢幕截圖，橫向模式。
在 iPad 上使用 Safari 播放影片的螢幕截圖，橫向模式。

使用 CSS 設定影片 width: 100% 或 max-width: 100%，即可解決許多裝置方向版面配置問題。

自動播放

autoplay 屬性可控制瀏覽器是否立即下載及播放影片。具體運作方式會因平台和瀏覽器而異。

即使是在可啟用自動播放功能的平台上，您也應考慮是否要啟用這項功能：

  • 數據傳輸費用可能很高。
  • 在使用者想要播放媒體之前就開始播放，可能會佔用頻寬和 CPU，進而延遲網頁轉譯作業。
  • 使用者可能處於播放影片或音訊會造成干擾的情況。

預先載入

preload 屬性會向瀏覽器提供提示，說明要預先載入多少資訊或內容。

值 說明
none 使用者可能會選擇不觀看影片，因此請勿預先載入任何內容。
metadata 應預先載入中繼資料 (時間長度、尺寸、文字軌)，但影片部分應盡量精簡。
auto 建議立即下載整部影片。空字串也會產生相同的結果。

preload 屬性在不同平台上會產生不同的效果。舉例來說，Chrome 會在電腦上緩衝 25 秒的影片，但 iOS 或 Android 則不會。也就是說，行動裝置可能會發生播放啟動延遲的情形，但電腦版不會。詳情請參閱「透過音訊和影片預先載入功能加快播放速度」或 Steve Souders 的網誌。

瞭解如何在網頁中加入媒體後，現在就來學習媒體無障礙設計，瞭解如何為聽障人士或無法播放音訊的情況，在影片中加入字幕。