从 53 版开始,Chrome(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 动画:
它们看起来非常相似,但视频的大小小于 200KB,而 GIF 动画的大小超过 900KB。
Chrome 和其他浏览器供应商对用户的带宽非常谨慎。对于许多用户而言,在许多情况下,高昂的流量费用通常会给用户带来更大的障碍,而不是较差的连接。鉴于旁路方法的普遍性,我们无法阻止静音自动播放,因此提供优质的 API 和默认设置是该平台能做的最好的事情。
网站越来越以媒体为中心。设计师和开发者不断寻找新的、意想不到的视频使用方式,并且希望在各个平台上实现一致的行为,例如在将背景视频用作设计元素时。在移动设备和桌面设备上,用户都可以通过静音自动播放功能实现此类功能。
更精细的控制点
- 从无障碍功能的角度来看,自动播放功能尤其有问题。Android 版 Chrome 53 及更高版本提供了一项设置来完全停用自动播放功能:在“媒体设置”中,选择“自动播放”。
- 此更改不会影响
audio
元素:Android 版 Chrome 上仍会停用自动播放,因为自动播放但静音的音频没有多大意义。 - 如果启用了流量节省程序模式,则不会自动播放。如果启用了流量节省程序模式,系统会在媒体设置中停用自动播放功能。
- 静音自动播放功能适用于任何可见文档(无论是 iframe 还是其他形式)中的任何可见视频元素。
- 请注意,如需利用新行为,您需要添加
muted
和autoplay
:将 simpl.info/video 与 simpl.info/video/muted 进行比较。
支持
- iOS 10 及更高版本的 Safari 支持自动播放并静音。
- Firefox 和 UC 浏览器已在 Android 设备上支持自动播放功能(无论是否已静音),它们不会屏蔽任何类型的自动播放。