H5的音视频自动播放问题

来源:简书 分类: 文章浏览史 发布时间:2020-12-02 19:45:16 最后更新:2020-12-02 浏览:146
转载声明:
本文为摘录自“简书”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-12-02 19:45:16

1. 背景和问题由来

(chrome浏览器)项目中用到了一个短视频页面加载动画,一开始视频无声正常。接着需求变更,让视频动画加上一个背景音乐,然后就不能播放了。然后开始了各种尝试和api文档查询。为何一个带声音的视频文件在chrome浏览器里无法有声自动播放呢?
经过调研和尝试,发现:

  • video标签的有声自动播放在iefirefox以及低版本的chrome浏览器都能正常。
  • video标签的有声自动播放在高版本的chrome浏览器里,第一次播放正常,第二次和之后不正常。强刷新(清理浏览器缓存)后又正常。
    -video标签用js动态加载,本页面的url变化后,视频正常播放;不变化视频不能正常播放。有点像重定向的可播放的味道。

2.调研发现

首先看看MDN对video标签的相关属性的描述,你会发现,对autoplay的描述里,多了一些关于chrome浏览器的补充描述:
In some browsers (e.g. Chrome 70.0) autoplay doesn't work if no muted attribute is present.
大致意思就是:静音播放。
然后,查询些其他资料,发现chrome的版本更新里,也有相关描述,连接如下:
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
不能翻墙的可以直接看下面截图:

google禁止自动播放条款.png

里面也介绍了chrome浏览器对视频播放的一些限制:静音自动播放;手动触发播放等等。
查询了一下,发现chrome浏览器之所以加这种限制,也是为了解决用户痛点:各种自动播放视频广告。如果是移动端上自动播放,那么流量就是用户自己承担了,而用户还不自知。只能说该浏览器在关注用户体验方面走在了其他浏览器厂商的前面。

3.解决方法

暂时只有2种方式:

  • 静音自动播放:<video src="xxx.mp4" autoplay muted></video>
  • 非静音手动触发播放。
php技术微信