自 53 版起,Chrome for Android 支援影片靜音自動播放功能。如果同時設定了 autoplay
和 muted
,影片元素進入檢視畫面後,就會自動開始播放。你也可以使用 play()
,用簡單操作的方式播放靜音的影片。過去,無論靜音狀態為何,都必須由使用者手勢啟動在行動裝置上播放。
<video autoplay muted>
<source src="video.webm" type="video/webm" />
<source src="video.mp4" type="video/mp4" />
</video>
如要查看實際運作情形,請參考此範例。Chrome 53 以上版本會自動開始播放 muted
影片。
此外,你現在可以使用 play()
方法啟動靜音播放。先前,play()
只會在使用者手勢 (例如點擊按鈕) 時啟動播放功能。比較以下兩種 Android 裝置的示範:在 Chrome 53 版和舊版上試用:
建議您盡可能使用 autoplay
屬性,且只在必要時使用 play()
方法。
您可以在回應使用者手勢 (例如 click
) 時,透過程式輔助方式取消影片靜音,但如果您嘗試在沒有使用者手勢的情況下,透過程式輔助方式取消影片靜音,播放作業就會暫停。
muted autoplay
變更也能讓您將 play()
與未在 DOM 中建立的 video
元素搭配使用,例如推動 WebGL 播放。
play()
方法也會傳回承諾,可用來檢查程式輔助靜音播放功能是否已啟用。相關範例位於 simpl.info/video/scripted。
為什麼要進行這項異動?
我們在舊版 Chrome Android 版中停用了自動播放功能,因為這可能會帶來幹擾、耗費大量資料,而且很多使用者不喜歡這項功能。
停用自動播放功能會對開發人員產生非預期效果,例如 GIF 動畫、<canvas>
和 <img>
手法。在耗電量、效能、頻寬需求、數據用量和記憶體用量方面,這些技術比最佳化的影片來得差。影片的品質比動畫 GIF 還要高畫質,而且壓縮效果比原始檔案更佳:平均約 10 倍,甚至最多 100 次。JavaScript 中的影片可以解碼,但消耗大量電池電力。
比較以下兩個條件,第一種是影片,第二種是動畫 GIF:
這兩者看起來很類似,但影片大小不到 200KB,動畫 GIF 也超過 900KB。
Chrome 和其他瀏覽器廠商在計算使用者頻寬方面相當謹慎,對於許多情況下,由於數據費用高昂,相較於連線品質不佳,往往更難以取得資料。由於解決方法很常見,靜音自動播放並未遭到封鎖,因此提供優質 API 和預設值是平台的最大優勢。
網路也越來越以媒體為中心。設計人員和開發人員不斷發掘各種新穎運用的影片運用方式,並期望在不同平台上都能享有一致的行為,例如使用背景影片做為設計元素。「靜音自動播放」功能可讓你在行動裝置和電腦上使用這項功能。
以比較精細的方式
- 對無障礙功能的觀點而言,自動播放可能會特別造成問題。Android 53 以上版本提供完全停用自動播放的設定,請在「媒體設定」中選取「自動播放」。
- 這項變更不會影響
audio
元素:Android 版 Chrome 的自動播放功能仍為停用狀態,因為靜音自動播放不太適合搭配音訊使用。 - 如果啟用數據節省模式,系統就不會自動播放。如果數據節省模式已啟用,系統會停用媒體設定中的自動播放功能。
- 這項設定適用於任何可見文件、iframe 或其他顯示方式中顯示的影片元素。
- 請記住,為了利用新行為,您必須新增
muted
以及autoplay
:比較 simpl.info/video 與 simpl.info/video/muted。
支援
- iOS 10 以上版本的 Safari 支援靜音自動播放功能。
- Firefox 和 UC 瀏覽器已支援 Android 自動播放功能 (無論是否設為靜音),不會封鎖任何自動播放類型。