在chrome浏览器内核中在chrome66版本后无法实现自动播放,现在我给大家一个全网独一份的解决方案。
首先我们来到W3C手册中
很多人可能会有所疑惑,上面明明有个autoplay属性,写的明明也很清楚描述上写着如果出现该属性则音频在就绪后马上播放,就绪是什么概念就绪就是你进入网页之后或者说这个音频它加。谷歌从chrome66版本中就禁用了这个属性让他直接播放。
我们一般想让他自动播放的都是采用两个办法,有些冷门的方法可以自己去查w3c。
首先要么你是你的媒体,参与指数达到一定的阈值,它才可以让你自动播放,就是如果用户每一次进入你的网页,它都会手动点击一次打开,就像你刷抖音,刚开始进去时你会发现他要你手动点击播放它才会播放到后来你就发现你每次进入这个网页它都会自动帮你点你点。
还有一个办法呢就是用户触发播放事件,播放事件是个什么东西啊就相当于你点击了那个播放按钮,但是我们播放按钮的样式是可以变的,你是可以重新创建一个按钮来播放的,就是说我把原有的audio标签给他隐藏掉在新建一个button或div当用户触发这个元素时,播放音乐。
这期咱主要用的就是第二个办法,但是咱不可以直接用第二个办法,咱要剑走偏锋。我是用让它自动播放,肯定不能让用户手动点击啊。
所以我就想出了一个主意,首先你创建一个div元素,你将它的透明度设为0.001众所周知在css中透明度呢是0到1之间0是完全透明1是不透明。当然你也可以用其他任何办法,只要让用户看不见,我只能看不见,是从感官上看不见。然后你可能会说我就创建一个元素,怎么让它自动播放呢?非常简单咱用js来监听他的事件,咱继续来到w3c。
鼠标事件(Mouse Events):例如鼠标点击(click)、双击(dblclick)、按下(mousedown)、抬起(mouseup)、移动(mousemove)等。
键盘事件(Key