學習基本知識影片。提升參與度。
您是否想在網站上加入影片?當裝置和網路連線變得更快速、更強大,您可以不再侷限於圖片及將影片加入技術工具,藉此打造網路。研究顯示,包含影片的網站能夠提高參與度和銷售量。因此,就算您尚未在網站上加入影片,可能還需要一段時間。
在任何可能的情況下,您新增至網站的影片檔案都會是下載的最大檔案。因此,請務必確保這些檔案能夠快速且穩定地播放給所有客戶。如果影片可以提高參與度和客戶滿意度,如果影片不會在播放過程中播放或停止播放,可能會導致客戶感到不悅。本文著重於使用 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> 標記的內建屬性,可協助您向網站的所有訪客提供無懈可擊的影片。