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

自 53 版起,Chrome for 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 动画:

剪辑视频正在播放。

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

Chrome 和其他浏览器供应商对用户带宽非常谨慎。对于许多用户而言,在许多情况下,高昂的数据费用往往比连接不良更难克服。鉴于变通方法的普遍性,静音自动播放无法被屏蔽,因此提供良好的 API 和默认设置是平台能做的最好选择。

网络越来越以媒体为中心。设计师和开发者不断发现使用视频的新方法,并希望在各个平台上获得一致的行为,例如在将背景视频用作设计元素时。静音自动播放功能可在移动设备和桌面设备上实现此类功能。

功能详解

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

支持

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

了解详情