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

自 53 版起,Chrome for Android 支援影片靜音自動播放功能。如果同時設定了 autoplaymuted,影片元素進入檢視畫面後,就會自動開始播放。你也可以使用 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/videosimpl.info/video/muted

支援

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

瞭解詳情