在行動裝置上關閉自動播放功能 - 揮別畫布技巧和 GIF 動畫!

自 Chrome 53 版起,Android 版 Chrome 就支援影片靜音自動播放功能。如果同時設定 autoplaymuted,影片元素一進入可視範圍就會自動開始播放,而靜音影片的播放作業則可透過 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) 中,靜音自動播放功能都會套用至任何可見的影片元素。
  • 請注意,如要充分利用新行為,您必須新增 mutedautoplay:請比較 simpl.info/videosimpl.info/video/muted

支援

  • iOS 10 以上版本的 Safari 支援靜音自動播放功能。
  • Firefox 和 UC Browser 已在 Android 上支援自動播放功能,無論是否靜音皆可使用,因此不會封鎖任何自動播放功能。

瞭解詳情