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

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

您是否要在網站上加入影片?隨著裝置和網路連線速度越來越快,您可以將圖片和影片加入建構網頁的工具箱,研究顯示,含有影片的網站可提高參與度和銷售量。因此,即使您尚未在網站上加入影片,在您完成這個步驟之前,可能還是需要一段時間。

您新增至網站的影片檔案,很可能會是下載的最大檔案。因此,請務必確保檔案能讓所有客戶快速、穩定地播放。雖然影片可以提升互動率和客戶滿意度,但如果影片無法播放或在播放期間停止,可能會讓客戶感到不耐煩。這篇文章著重於使用 HTML5 <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 屬性有三個值:autometadatanone

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> 標記內建的屬性,可大幅提升網站訪客觀看影片的流暢度。