自 53 版起,Chrome for Android 支持静音自动播放视频。如果同时设置了 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()
方法还会返回一个 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
元素:Chrome on Android 仍会停用自动播放功能,因为静音自动播放对音频来说意义不大。 - 如果启用了流量节省模式,则不会自动播放。如果启用了流量节省模式,则会在“媒体”设置中停用自动播放功能。
- 静音自动播放功能适用于任何可见文档、iframe 或其他元素中的任何可见视频元素。
- 请注意,如需利用新行为,您需要同时添加
muted
和autoplay
:请比较 simpl.info/video 与 simpl.info/video/muted。
支持
- iOS 10 及更高版本上的 Safari 支持静音自动播放。
- Firefox 和 UC 浏览器已在 Android 上支持自动播放(无论是否静音),它们不会阻止任何类型的自动播放。