Chrome 66 禁止声音自动播放,开发怎么应对?

来源:http://www.chinese-glasses.com 作者:Web前端 人气:200 发布时间:2020-03-14
摘要:video controls="controls" autoplay="autoplay" name="media" mutedsource src="" type="audio/mpeg"/video (1)没音频轨道,或者设置了muted属性 时间: 2019-12-05阅读: 108标签: 视频1.video标签 最开始移动端浏览器是完
video controls="controls" autoplay="autoplay" name="media" mutedsource src="" type="audio/mpeg"/video 

(1)没音频轨道,或者设置了muted属性

时间: 2019-12-05阅读: 108标签: 视频1.video标签

最开始移动端浏览器是完全禁止音视频自动播放的,考虑到了手机的带宽以及对电池的消耗。但是后来又改了,因为浏览器厂商发现网页开发人员可能会使用GIF动态图代替视频实现自动播放,正如IOS文档所说,使用GIF的带宽流量是Video(h264)格式的12倍,而播放性能消耗是2倍,所以这样对用户反而是不利的。又或者是使用Canvas进行hack,如Android Chrome文档提到。因此浏览器厂商放开了对多媒体自动播放的限制,只要具备以下条件就能自动播放:

audio controls="controls" source src="./img/music.mp3"/audio 

Chrome的文档给了一个最佳实践:先把音视频加一个muted的属性就可以自动播放,然后再显示一个声音被关掉的按钮,提示用户点一下打开声音。对于视频来说,确实可以这样处理,而对于音频来说,很多人是监听页面点击事件,只要点一次了就开始播放声音,一般就是播放个背景音乐。但是如果对于有多个声音资源的页面来说如何自动播放多个声音呢?

原理就是大多数浏览器在都支持静音的视频播放

10bet 1

embed src="./img/music.mp3" hidden="true" autostart="true" loop="true" 

embed src="" autostart="true" loop="true" 

(2)在视图里面是可见的,要插入到DOM里面并且不是display: none或者visibility: hidden的,没有滑出可视区域。

支持firefox自动播放 谷歌、ie不支持自动播放

桌面版的浏览器在近期也使用了这个策略,如升级后的Safari 11的说明:

自动播放支持安卓,不支持ios,支持谷歌 ie ie edge 不支持firefox

10bet,对于网页开发人员来说,应当如何有效地规避这个风险呢?

谷歌可以通过添加muted 通过静音来实现自动播放

Chrome报错提示最为友善,意思是说,用户还没有交互,不能调play。用户的交互包括哪些呢?包括用户触发的touchend, click, doubleclick或者是 keydown事件,在这些事件里面就能调play.

video controls="controls" autoplay="autoplay" name="media" mutedsource src="./img/music.mp3" type="audio/mpeg"/video 

DOMException: play() failed because the user didn't interact with the document first.

可以支持多种播放器

换句话说,只要你不开声音扰民,且对用户可见,就让你自动播放,不需要你去使用GIF的方法进行hack.

补充说明:声音无法自动播放这个在 IOS/Android 上面一直是个惯例,桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在 2018 年 4 月份发布的 Chrome 66 也正式关掉了声音自动播放,也就是说 audio autopaly video autoplay在桌面版浏览器也将失效。谷歌说明:可自动播放例外条件:上面我们已经提到如果视频本身已经被设置为静音的情况下,那么浏览器将不会再拦截其加载进行自动播放。同时如果用户此前点击过自动播放的话那么下次再访问同样的网站,那么浏览器默认情况也不会拦截其播放,而在移动设备上如果用户选择将网站添加到主屏幕上也就是经常访问的网站,这种情况下同样可以自动播放。最后:根据谷歌统计数据如果网站视频被大量播放例如视频网站,这种情况下也不会被拦截掉自动播放功能

我们先用audio.play检测页面是否支持自动播放,以便决定我们播放的时机。

注意:只能音乐不能加载视频

Safari会这么提示:

注意:标签定义声音,比如音乐或其他音频流。

首先,如果用户还没进行交互就调用播放声音的API,Chrome会这么提示:

本文由10bet发布于Web前端,转载请注明出处:Chrome 66 禁止声音自动播放,开发怎么应对?

关键词:

最火资讯