HTML5 video(PC和移动端)自动播放学习指北

一.背景

自动播放的问题在工作中时常遇到,针对自动播放做了一下简单的总结。

二.自动播放

 

自动播放就是未经用户的允许,播放音频或视频的行为。

在HTML里,通过给video标签, audio标签设置autoplay的属性,或者通过JS的代码去执行播放的逻辑自动播放经常会碰到这些问题






//

videoElement.play()

audioElement.play()
  • 为什么不能自动播放
  • 为什么自动播放时没有声音
  • 为什么在我的网站上自动播放会静音,在别的视频网站上就不会
  • ....

 

关于这些问题,后面会慢慢补充解释,我们还是从用户体验的方面去思考,为什么浏览器会限制自动播放

如果一个网页在没有任何警告的情况下自动播放带声音的媒体资源,如果发出一些噪音或对人造成困扰,讨厌的声音,对用户的体验是非常不好的。所以,浏览器会限制自动播放,在特定的情况下才能带声音自动播放。

 

 

三.自动播放的策略

一些主流的浏览器对自动播放会有以下的规则,如 chrome, firefox :

  • 视频设置为静音或音量设置为0
  • 用户与网站进行了交互,例如由用户触发的事件,如(click, tap, keypress)之类的事件里调用视频的播放
  • 网站被列入白名单,用户在网站上使用媒体比较频繁,媒体参与度分值足够高,或者在浏览器的设置里设置了允许自动播放(如IE, safari)
  • 在iframe的标签上设置了允许自动播放(应该需要父页面也能自动播放)

 

根据浏览器的自动播放策略,上面的一些问题就可以得到解释,如自动播放时没有声音是因为要静音才能自动播放,也可以说明自动播放无效,是不是没有设置静音。

在一些视频网站上能带声音自动播放,就是视频网站了多次观看视频,媒体参与度分值足够高了。

 

chrome自动播放策略简略截图:(详细请参考文档末尾资料的chrome自动播放策略)

HTML5 video(PC和移动端)自动播放学习指北_第1张图片

四.自动播放在移动端的支持情况.

测试demo代码: https://codepen.io/zackxiong/pen/oNvqZVw

video标签设置autoplay, muted属性。测试mp4在主流浏览器自动播放的情况。(有空更新)

机型

安卓微信浏览器(7.0.13)

小米浏览器(11.11.22)

安卓QQ浏览器(10.2.1.6632)

安卓UC浏览器(12.9.7.1077)

安卓猎豹浏览器(5.20.4)

安卓Chrome浏览器(80.0.3987.119)

搜狗浏览器(5.27.8.86541)

红米k20 Prp 不能 允许 允许 不能 不能 允许 允许
小米5s              

五.检测页面是否支持自动播放

基本上主流的浏览器都没有一个直接的方法,属性,或者回调去检测页面是否支持自动播放。需要从另外的方向去检测页面是否支持自动播放。

可以从play() 方法去入手, play() 会返回一个 Promise对象,如果播放失败,Promise对象的状态就会变为rejected. 这时候可以通过catch去捕捉这个错误,如果捕捉的错误是NotAllowedError,那么就可以说明页面不支持自动播放。

当然,也要注意一下浏览器的兼容性,要检测play() 返回是不是undefined.

codepen demo: https://codepen.io/zackxiong/full/wvKJbZe

 

六.特殊的情况

用户通过点击跳转到新页面,新页面视频设置了自动播放,此时也可以带声音自动播放,但是刷新页面后就无法自动播放了

测试demo : (暂时不方便放测试demo地址,小伙伴们可以自己写两个简单的页面, 页面A通过a标签跳转到页面B, 页面B有自动播放的逻辑)

这种情况应该是由用户点击跳转的页面,新页面也符合由用户进行交互的规则。但是刷新页面就没有用户的交互了,所以也就无法自动播放。

七.自动播放的参考资料

  • chrome浏览器自动播放策略(需要科学上网)
  • Feature-Policy: autoplay
  • MDN 自动播放指南

 

你可能感兴趣的:(HTML5 video(PC和移动端)自动播放学习指北)