學習基本知識影片。提升參與度。
您是否想在網站上加入影片？當裝置和網路連線變得更快速、更強大，您可以不再侷限於圖片及將影片加入技術工具，藉此打造網路。研究顯示，包含影片的網站能夠提高參與度和銷售量。因此，就算您尚未在網站上加入影片，可能還需要一段時間。
在任何可能的情況下，您新增至網站的影片檔案都會是下載的最大檔案。因此，請務必確保這些檔案能夠快速且穩定地播放給所有客戶。如果影片可以提高參與度和客戶滿意度，如果影片不會在播放過程中播放或停止播放，可能會導致客戶感到不悅。本文著重於使用 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 影片大上許多。在其中一個範例中，您可以看到兩分鐘電影的差異：
| 編碼器 | 檔案大小 |
|---|---|
| VP8 | 5.5 MB |
| VP9 | 4.2 MB |
| H.265 | 5.4 MB |
| H.264 | 16.1 MB |
傳送較小的檔案最能有效提供影片，達到最佳效能最佳化。下載較小的影片時，影片較快播放，同時影片緩衝區會較快填滿。這在影片播放期間減少的停頓。此外，伺服器負載會減少，這也導致多個影片檔案的儲存空間需求增加。
預先載入屬性
影片必須先下載並儲存在本機，才能開始播放。預先載入屬性可讓您控制網頁載入時要下載的影片數量。預先載入屬性有三個值：auto、metadata 和 none。
preload='auto'
如果使用 'auto'，無論是否按下播放，都會下載整個影片。如此一來，當使用者按下播放影片前，影片就會先下載到本機，因此能快速播放。從資料用量 (和伺服器負載) 中，只有在非常可能有人觀看影片時，才應使用這個屬性。否則，系統將會略過完整影片下載的所有資料。
preload='metadata'
這是 Chrome 和 Safari 預先載入的預設設定。使用 'metadata' 時，系統會下載影片的前 3%。雖然這與 'auto' 分享建議，但下載影片只有 3% 所產生的伺服器/數據用量比完整影片少很多，但仍能確保一部分影片儲存在本機，以便快速啟動影片。
preload='none'
這樣做可儲存最多資料，但按下播放時可加快影片啟動速度，因為設定狀態時，系統會在裝置本機預先載入零 KB 的影片。針對存在但不太可能播放的影片，此設定適用於。如果使用者在瀏覽器中啟用精簡模式，也可以採用這個做法。
海報
建議您在影片開始播放前，在影片視窗上顯示代表圖片：
<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">
不含海報的影片在片頭播放前出現黑色畫面。
可以附上海報的影片更吸引人。
只要新增相片代替網頁上的黑色方塊，就能讓網站更具吸引力和互動性。不過，使用 poster 屬性會在影片下載開始前新增下載圖片。因此，建議您避免為自動播放的影片新增海報 (因為額外下載會延遲影片下載)。
播放控制項
新增 controls 屬性會加入播放控制項。如果沒有這些屬性，您的客戶就無法開始或停止播放影片。您應該為影片新增這個屬性，讓使用者能夠停止和暫停、調整音量等。如果是背景或循環影片，您可以省略這個屬性。
已設為靜音。
muted 屬性會導致以靜音狀態開始播放。如未提供任何控制項，則在整個播放過程中會保持靜音。如果是這種情況，請移除影片中的音軌。這樣做就能減少要提供給客戶的影片檔案大小。
與容器和轉碼器一樣，移除音訊檔案 (也稱為 demuxing) 也不屬於本文的討論範圍。如需操作說明，請參閱媒體操縱一覽表。
迴圈
如要提供會循環播放內容的影片 (例如動畫 GIF)，請新增 loop 屬性。由於影片檔案通常比 GIF 動畫小許多，因此這項機制可讓您以影片檔案取代 GIF。
自動播放影片
如果想讓影片立即播放 (例如背景影片或會循環播放的 GIF 動畫)，可以新增 autoplay 屬性：
<video src="myVideo.mp4" autoplay>
也就是說，如要在行動瀏覽器中自動播放影片，您必須一併新增 muted 屬性：
<video src="myVideo.mp4" autoplay muted>
結論
只要在網站中加入影片，即可為客戶創造新的互動領域，但請務必妥善提供內容，確保影片播放順暢且沒有停滯。使用 <video> 標記的內建屬性，可協助您向網站的所有訪客提供無懈可擊的影片。