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

从版本 53 开始,Chrome(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() 方法还会返回一个 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/videosimpl.info/video/muted

支持

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

了解详情