為網頁提供基本影片，跳脫圖片框架

瞭解基本影片。提升參與度。

Doug Sillars

您是否想在網站中加入影片？隨著裝置和網路連線速度越來越快，您可以將圖片和影片加入建構網頁的工具箱，研究顯示，含有影片的網站可提高參與度和銷售量。因此，即使你尚未在網站中加入影片，也只是時間問題。

您新增至網站的影片檔案，很可能會是下載的最大檔案。因此，請務必確保檔案能為所有客戶提供快速且穩定的播放效果。雖然影片可以提升互動率和客戶滿意度，但如果影片無法播放或在播放期間停止，可能會讓客戶感到不耐煩。這篇文章著重於使用 HTML5 <video> 標記來提供影片，因此不會涵蓋串流影片。

那麼，我們開始吧！

<video> 標記

這似乎很明顯，對吧？如要新增影片，您必須新增 <video> 標記，並指向來源，即可開始使用！

<video src="myVideo.mp4">

你說得沒錯。在最高層級，這是新增影片到網路的所有必要步驟。不過，您可以為影片標記新增許多屬性，以改善影片的版面配置和放送方式。

<source> 標記

改善網路上影片放送品質的最佳方式，或許是將傳送至瀏覽器的檔案進行最佳化。方法是使用 <source> 標記：

<video>
  <source src="myWebmVideo.webm" type="video/webm">
  <source src="myh265Video.mp4" type="video/mp4">
  <source src="myh264Video.mp4" type="video/mp4">
</video>

這會參照三個不同的來源檔案。瀏覽器會從最上方開始，挑選可用的首個格式和編解碼。在影片領域中，檔案格式 (通常稱為容器) 可使用不同的編解碼儲存，每個編解碼都有不同的屬性。(詳情請參閱這篇文章)。在上例中，第一個選項是 WebM 格式 (可使用 VP8 或 VP9 編解碼器編碼)，且在撰寫本文時，有 78% 的全球使用者支援此格式。第二個選項是 mp4 的 H.265 轉碼器，iOS 和較新版本的 Mac 都支援這項轉碼器。這些轉碼器較新，可改善資料壓縮，同時提供與舊版視訊格式相同品質的影片。

最後一個選項是 H.264 mp4，這個格式支援 92% 的全球使用者，但屬於較舊的格式，因此通常比 WebM 或 H.265 影片大得多。在一個例子中，你可以看到兩分鐘電影的差異：

提交較小的檔案是最佳的效能最佳化方式，可讓您更順利地提交影片。下載較小的影片時，影片播放時間會縮短，且影片緩衝區也會更快填滿。這可減少影片播放時的停頓情形。此外，伺服器負載會降低，以彌補多個影片檔案的儲存空間需求。

預先載入屬性

系統必須先下載並在本機儲存部分影片，才能開始播放影片。您可以使用預先載入屬性，控制網頁載入時下載的影片量。preload 屬性有三個值：auto、metadata 和 none。

preload='auto'

如果使用 'auto'，無論使用者是否按下播放鍵，系統都會下載整部影片。這樣一來，影片會在使用者按下播放鍵之前下載到本機，因此可快速播放影片。從資料使用量 (以及伺服器負載的角度) 來看，只有在使用者極有可能觀看影片時，才應使用這項功能。否則，完整影片下載作業的所有資料都會浪費掉。

preload='metadata'

這是 Chrome 和 Safari 的預先載入預設設定。使用 'metadata' 時，系統會下載影片的前 3%。雖然這與 'auto' 有相同的警告事項，但只下載影片的 3% 會比下載整部影片的伺服器/資料用量成本低得多，同時仍可確保將部分影片儲存在本機，以便快速啟動影片。

preload='none'

這麼做可節省最多資料，但會導致按下播放時影片啟動速度變慢，因為根據設定，系統會在裝置上預先載入零千位元大小的影片。如果影片存在，但不太可能播放，這就是適當的設定。如果使用者在瀏覽器中啟用精簡模式，系統也可能會使用這項功能。

海報

您可能會在影片開始播放前，在影片視窗上方顯示代表圖片：

<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">

在頁面上加入相片，而非黑色方塊，可讓網站更具吸引力和互動性。不過，使用 poster 屬性會在影片下載作業開始前新增圖片下載作業。因此，建議你不要為自動播放的影片新增海報，因為額外的下載作業會延遲影片下載作業。

播放控制項

新增 controls 屬性即可新增播放控制項。否則客戶將無法開始或停止播放影片。您應為影片新增此元素，讓使用者可以停止、暫停播放、變更音量等。如果是背景或循環播放的影片，建議您省略這項屬性。

已設為靜音。

muted 屬性會讓播放作業以靜音狀態開始。如果未提供控制項，則在播放期間，音訊將維持靜音。如果這是你的用意，建議你從影片中移除音軌。這可進一步縮減傳送給客戶的影片檔案大小。

如同容器和編解碼，移除音訊檔案 (又稱為解多工) 也超出本文的討論範圍。如需操作說明，請參閱媒體操控訣竅手冊。

迴圈

如要提供可循環播放內容的影片 (例如 GIF 動畫)，請新增 loop 屬性。由於影片檔案通常比 GIF 動畫小得多，因此您可以使用這個機制將 GIF 動畫替換為影片檔案。

自動播放影片

如果您希望影片立即播放 (例如做為背景影片，或做為可像 GIF 動畫重複播放的影片)，可以新增 autoplay 屬性：

<video src="myVideo.mp4" playsinline autoplay>

不過，為了讓影片在行動瀏覽器上自動播放，您也必須新增 muted 屬性：

<video src="myVideo.mp4" playsinline autoplay muted>

結論

只要在網站上加入影片，就能為客戶帶來新的互動體驗，但請務必正確提供內容，確保影片播放流暢無礙。使用 <video> 標記內建的屬性，有助於為所有造訪網站的使用者提供完美的影片。