瞭解基本影片。提高參與度。
您是否要在網站上加入影片？隨著裝置和網路連線速度越來越快，您可以將圖片和影片加入建構網頁的工具箱，研究顯示，含有影片的網站可提高參與度和銷售量。因此，即使您尚未在網站上加入影片，在您完成這個步驟之前，可能還是需要一段時間。
您新增至網站的影片檔案，很可能會是下載的最大檔案。因此，請務必確保檔案能讓所有客戶快速、穩定地播放。雖然影片可以提升互動率和客戶滿意度，但如果影片無法播放或在播放期間停止，可能會讓客戶感到不耐煩。這篇文章著重於使用 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，這種 H.264 mp4 可支援 92% 的全球使用者，但是較舊的格式，因此通常比 WebM 或 H.265 影片大上許多。在一個例子中，你可以看到兩分鐘電影的差異：
| 轉碼器 | 檔案大小 |
|---|---|
| VP8 | 5.5 MB |
| VP9 | 4.2 MB |
| H.265 | 5.4 MB |
| H.264 | 16.1 MB |
提交較小的檔案是最佳的效能最佳化方式，可讓您更順利地提交影片。下載較小的影片時，影片播放時間會縮短，且影片緩衝區也會更快填滿。這可減少影片播放時的停頓情形。此外，伺服器負載會降低，以彌補多個影片檔案的儲存空間需求。
預先載入屬性
將影片下載至本機並儲存後，影片才能開始播放。使用預先載入屬性，即可控制網頁載入時要下載的影片量。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> 標記內建的屬性，可大幅提升網站訪客觀看影片的流暢度。