在行動裝置上關閉自動播放功能 - 揮別畫布技巧和 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 動畫:

播放短片。

這種圖片看起來很類似,但影片大小小於 200KB,動畫 GIF 則超過 900KB。

Chrome 和其他瀏覽器供應商都非常重視使用者的頻寬。在許多情況下,對許多使用者來說,高額的數據費用往往比連線品質不佳更難以克服。由於有許多替代方案,系統無法封鎖靜音自動播放功能,因此提供良好的 API 和預設值,是平台能採取的最佳做法。

網路越來越以媒體為中心。設計師和開發人員不斷尋找新穎的影片使用方式,並希望在各平台上提供一致的行為,例如將背景影片用作設計元素。在行動裝置和電腦上,這項功能都會在靜音自動播放時啟用。

細節

  • 從無障礙觀點來看,自動播放可能發生問題。Android 版 Chrome 53 以上版本提供可完全停用自動播放功能的設定:在「媒體」設定中選取「自動播放」。
  • 這項變更不會影響 audio 元素:Android 版 Chrome 仍會停用自動播放功能,因為靜音自動播放功能對音訊來說沒有太大意義。
  • 開啟數據節省模式時,系統不會自動播放影片。如果啟用數據節省模式,媒體設定中就會停用自動播放功能。
  • 靜音自動播放功能適用於任何可見文件 (包括 iframe 等) 中的任何可見影片元素。
  • 請注意,如要利用新的行為,您必須新增 mutedautoplay:比較 simpl.info/videosimpl.info/video/muted 的結果。

支援

  • iOS 10 以上版本的 Safari 支援靜音自動播放功能。
  • Android 的 Firefox 和 UC 瀏覽器都支援自動播放 (無論是否靜音),不會封鎖任何自動播放的內容。

瞭解詳情