瞭解基本影片。提高參與度。
您是否要在網站上加入影片?隨著裝置和網路連線速度越來越快,您可以將圖片和影片加入建構網頁的工具箱,研究顯示,含有影片的網站可提高參與度和銷售量。因此,即使您尚未在網站上加入影片,在您完成這個步驟之前,可能還是需要一段時間。
您新增至網站的影片檔案,很可能會是下載的最大檔案。因此,請務必確保檔案能讓所有客戶快速、穩定地播放。雖然影片可以提升互動率和客戶滿意度,但如果影片無法播放或在播放期間停止,可能會讓客戶感到不耐煩。這篇文章著重於使用 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> 標記內建的屬性,可大幅提升網站訪客觀看影片的流暢度。