自 Chrome 53 版起,Android 版 Chrome 就支援影片靜音自動播放功能。如果同時設定 autoplay
和 muted
,影片元素一進入可視範圍就會自動開始播放,而靜音影片的播放作業則可透過 play()
實際啟動。先前,無論是否處於靜音狀態,使用者都必須透過手勢才能在行動裝置上播放內容。
<video playsinline 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。
異動原因
在 Android 版 Chrome 的先前版本中,我們已停用自動播放功能,因為這項功能可能會造成干擾、耗用大量資料,且許多使用者不喜歡。
停用自動播放功能後,開發人員會轉而使用 GIF 動畫、<canvas>
和 <img>
等替代方案。在耗電量、效能、頻寬需求、資料成本和記憶體用量方面,這些技巧都比經過最佳化的影片差得多。影片的品質比動態 GIF 更高,且壓縮率也更佳:平均約 10 倍,最高可達 100 倍。在 JavaScript 中進行影片解碼是可行的,但會大量耗用電池電力。
請比較以下兩種格式:第一個是影片,第二個是 GIF 動畫:

兩者看起來很相似,但影片大小不到 200 KB,而 GIF 動畫大小超過 900 KB。
Chrome 和其他瀏覽器供應商都非常重視使用者的頻寬。在許多情況下,對許多使用者來說,高額的數據費用往往比連線品質不佳更難以克服。由於有許多替代方案,系統無法封鎖靜音自動播放功能,因此提供良好的 API 和預設值,是平台能採取的最佳做法。
網路越來越以媒體為中心。設計師和開發人員不斷尋找新穎的影片使用方式,並希望在各平台上提供一致的行為,例如將背景影片用作設計元素。在行動裝置和電腦上,靜音自動播放功能可啟用這類功能。
細節
- 從無障礙功能的角度來看,自動播放功能可能會造成特別嚴重的問題。Android 版 Chrome 53 以上版本提供可完全停用自動播放功能的設定:在「媒體」設定中選取「自動播放」。
- 這項變更不會影響
audio
元素:Android 版 Chrome 仍會停用自動播放功能,因為靜音自動播放功能對音訊來說沒有太大意義。 - 開啟數據節省模式時,系統不會自動播放影片。如果啟用數據節省模式,媒體設定中就會停用自動播放功能。
- 在任何可見的文件 (包括 iframe) 中,靜音自動播放功能都會套用至任何可見的影片元素。
- 請注意,如要充分利用新行為,您必須新增
muted
和autoplay
:請比較 simpl.info/video 與 simpl.info/video/muted。
支援
- iOS 10 以上版本的 Safari 支援靜音自動播放功能。
- Firefox 和 UC Browser 已在 Android 上支援自動播放功能,無論是否靜音皆可使用,因此不會封鎖任何自動播放功能。