在移动设备上自动静音播放 - 告别画布技巧和 GIF 动画!

从 53 版开始,Chrome(Android 版)支持静音自动播放视频。如果同时设置了 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 动画:

剪辑视频播放。

它们看起来非常相似,但视频的大小小于 200KB,而 GIF 动画的大小超过 900KB。

Chrome 和其他浏览器供应商对用户的带宽非常谨慎。对于许多用户而言,在许多情况下,高昂的流量费用通常会给用户带来更大的障碍,而不是较差的连接。鉴于旁路方法的普遍性,我们无法阻止静音自动播放,因此提供优质的 API 和默认设置是该平台能做的最好的事情。

网站越来越以媒体为中心。设计师和开发者不断寻找新的、意想不到的视频使用方式,并且希望在各个平台上实现一致的行为,例如在将背景视频用作设计元素时。在移动设备和桌面设备上,用户都可以通过静音自动播放功能实现此类功能。

更精细的控制点

  • 从无障碍功能的角度来看,自动播放功能尤其有问题。Android 版 Chrome 53 及更高版本提供了一项设置来完全停用自动播放功能:在“媒体设置”中,选择“自动播放”。
  • 此更改不会影响 audio 元素:Android 版 Chrome 上仍会停用自动播放,因为自动播放但静音的音频没有多大意义。
  • 如果启用了流量节省程序模式,则不会自动播放。如果启用了流量节省程序模式,系统会在媒体设置中停用自动播放功能。
  • 静音自动播放功能适用于任何可见文档(无论是 iframe 还是其他形式)中的任何可见视频元素。
  • 请注意,如需利用新行为,您需要添加 mutedautoplay:将 simpl.info/videosimpl.info/video/muted 进行比较。

支持

  • iOS 10 及更高版本的 Safari 支持自动播放并静音。
  • Firefox 和 UC 浏览器已在 Android 设备上支持自动播放功能(无论是否已静音),它们不会屏蔽任何类型的自动播放。

了解详情