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

Chrome for Android 53 以上版本支援影片自動播放 (已靜音)。如果同時設定 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() 方法也會傳回 Promise,可用於檢查是否已啟用程式輔助靜音播放。如需相關範例,請前往 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 瀏覽器已支援在 Android 裝置上自動播放影片 (無論是否靜音),不會封鎖任何自動播放功能。

瞭解詳情