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

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

您正確準備了用於網路的影片檔案。提供的尺寸和解析度都正確無誤您甚至可以為不同的瀏覽器分別建立不同的 WebM 和 MP4 檔案。

即使任何人都能觀看您的影片，仍然需要將影片新增至網頁。如要正確執行此操作，您必須新增 <video> 元素和 <source> 元素這兩個 HTML 元素。除了這些標記的基本概念之外，本文也會說明您應該在標記中加入的屬性，以便打造良好的使用者體驗。

指定單一檔案

雖然我們不建議這麼做，但您也可以單獨使用影片元素。請一律使用 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 屬性可能會影響效能。

有幾種方法可以深入瞭解細節。歡迎觀看 A Digital Media Primer for Geeks，進一步瞭解網路上的視訊和音訊如何運作。您也可以使用開發人員工具中的遠端偵錯功能，比較網路活動具有類型屬性和不含類型屬性的網路活動。

設定開始和結束時間

使用媒體片段為影片元素新增開始和結束時間，藉此節省頻寬並提高網站回應效果。

如要使用媒體片段，請將 #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 播放提示點，不需要編碼及提供多個檔案。

如要讓這項功能順利運作，您的伺服器必須支援範圍要求，且必須啟用該功能。大部分的伺服器預設會啟用範圍要求。由於部分代管服務會關閉這些功能，因此您必須確認網站上的片段可使用範圍要求。

幸好，你可以透過瀏覽器開發人員工具進行這項操作。舉例來說，在 Chrome 中，您可以前往網路面板。找出 Accept-Ranges 標頭，並驗證其是否顯示 bytes。在圖片中，我已經在標題周圍繪製一個紅色方塊。如果您未看到 bytes 值，就必須聯絡代管服務供應商。

Chrome 開發人員工具螢幕截圖：Accept-Ranges: 個位元組。
Chrome 開發人員工具螢幕截圖：Accept-Ranges: 位元。

加入代表圖片

在 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 網誌」。

現在您已瞭解如何在網頁中加入媒體，接下來請參閱媒體無障礙設計指南，瞭解如何在影片為聽障人士加入字幕，或是播放音訊時無法使用這個選項。