Html5 在 Android/IOS 浏览器如何自动播放视频

1,571 阅读1分钟

相信很多 Web 前端开发小伙伴因为工作的需求,在研究怎么通过 HTML5 实现视频在手机浏览器的自动播放(主流浏览器)。在这里,我要告诉大家:

  • Chrome for Android 从版本54开始支持静音视频自动播放
  • Safari for iOS 10 从版本602开始支持静音视频自动播放
  • Autoplay, whether muted or not, is already supported on Android by Firefox and UC Browser: they do not block any kind of autoplay

主要原因:

为了通过视频解决大体积的 GIF 动画问题。由于动画 GIF 可能会变得非常大,视频通常要小得多。这就是 Apple 和 Google 决定在其移动浏览器中允许自动播放的原因。但前提是视频静音。在 iOS 上,还必须设置 playsinline 属性,因为默认情况下视频将全屏播放。

系统/浏览器是否支持自动播放
iOS 9 Safari 601no
iOS 10 Safari 602yes (with muted + playsinline attributes)
iOS 9 Chrome 54no
iOS 10 Chrome 54yes (with muted + playsinline attributes)
iOS 9 Opera Mini 14no
iOS 10 Opera Mini 14yes (plays fullscreen)
iOS 9 Firefox 5.3no
iOS 10 Firefox 5.3no
Android Chrome 43no
Android Chrome 54yes (with muted attribute)
Android Opera Mini 20no
Android Firefox 49yes
Android Samsung Internet 4.0no
Windows Phone 8 IEMobile 10no
Windows Phone 8.1 IEMobile 11yes
Windows 10 Mobile Edge 14.1no
Windows 10 Mobile Opera Mini 9.1no

参考: walterebert.com/blog/html5-…