关于html自动播放的那些坑

　　最近接了一个任务，做一个展示单页，但是需要有声音提示，就遇到了浏览器的一个问题

　　由于谷歌等浏览器厂商保护用户体验，chrome 从66版本以后，打开页面不允许播放声音，导致自动播放声音时，audio标签相关的内容直接报错，如下：

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

　　一番百度之后，主要提供的解决方案有两种，一种是在audio标签中添加muted 属性，进入页面后静默播放，另一种是更改浏览器设置（其实已经没啥用了，新版的chrome已经没有了那种选项）

　　通过百度提供的方案，做到了进入页面后静默播放，但是我要的是得有声音啊啊啊啊啊啊啊！！！！经过一番曲折，曲线救国，添加了点击事件判定来触发解除静音，不得不说谷歌做的很严，不允许js模拟点击，必须是浏览器侦测到了真实的点击以后才可以，但是又引发了另一个问题，用户这个东西可能没有机会在页面上点一下，毕竟是一个纯展示的东西，那么应该怎么办？

　　这个时候屈服于业务需求，将chrome降级为65版本后解决了这个问题，但是又引发了另一个问题，由于js执行的异步性，经常会导致vuejs的数据还没有渲染上，直接就已经触发自动播放了，这个时候又只能曲线救国，新增一个数据状态，进行updated监控，更新之后使用 this.$nextTick 进行处理，只有数据更新时再调用播放。

　　在解决完以上问题之后，功能基本已经满足了，能够在低版本的浏览器中实现用户无操作自动播放声音，但是写完功能发布到测试服务器的一个小时后，出现了这么一个问题，高版本的浏览器，如80版本的浏览器，竟然可以实现声音自动播放？？？？？？？？这与我开发遇到的问题完全的相反，遂进行了以下测试：

　　1.我自己的chrome80版本（64位），打开一个远程服务器站点页面标签，可以进行自动播放，打开一个本地站点页面标签，不能进行自动播放 ====》难道跟是不是我本地的站点有关系？

　　2.打开一台电脑A，也是chrome80版本（32位），打开远程服务器站点页面，可以进行自动播放 ====》难道真的是本地站点的锅？

　　3.打开另一台电脑B，也是chrome80版本（32位），打开远程服务器站点页面，报错 ======》这到底是为什么？

　　4.尝试硬性刷新上述四个页面，能播放的依然能播放，不能播放的依然不能播放 ===》黑人问号？？？？

　　所以现在的chrome究竟是允许自动播放还是不允许自动播放，难道说是看脸的吗？

附：补坑代码：

　　一个隐藏式的audio

<div id="screen" class="container" v-on:click="changeActive()">

　　<audio muted v-bind:src="voicePlaySource" id="voice" controls="controls" preload="preload" hidden></audio>
</div>

实现js播放视频--vuejs的methods

doVoicePlay:function(){
    if(this.voicePlayStatus === 1 && this.voicePlaySource !== "" ){
        this.voicePlay(0)
    }
},

voicePlay:function (type) {
    console.log("voice play type : " + type)
    var audio = document.getElementById('voice');
    audio.volume = 1
    audio.muted = false
    if (type === 0) {
        audio.play();
        this.voicePlayStatus = 0
    } else if(type === 1){
        audio.pause();
    }
}

通过监听数据变化播放音频--vuejs updated

updated: function(){
    this.$nextTick(() => {
        if (this.voicePlayStatus === 1 && this.voicePlaySource !== ""){
            this.doVoicePlay()
        }
    });
},

基本的处理逻辑：接口获得数据-》更新是否播放音频状态-》监控播放状态，如果可以播放并且赋值src了相应的路径，就执行doVoicePlay去播放，触发播放后更新播放状态为不播放，这样也不会影响正在播放的音频

关于html自动播放的那些坑

猜你喜欢