（Chrome下autoplay失效）谷歌、火狐浏览器对audio、video标签的autoplay自动播放属性不同的支持表现-解决方案

文章更新自2019年01月05日 

最近学习到H5的audio与video两个媒体标签，遇到Chrome和Firefox浏览器下对autoplay属性有不同的支持表现

demo：

表现不同：

Chrome：无法自动播放，不支持autoplay="autoplay"

Firefox：能自动播放，支持autoplay="autoplay"

 

原因：

Chrome在2018年10月份更新后关闭了audio、video媒体autoplay自动播放。

 

解决方案1：用js触发autoplay（Chrome下不彻底）

html：


js:
window.onload=function () {
    let oA=document.querySelector("#a1");
    let timer=null;
    function autoPlay() {
        if (oA.paused) { //如果暂停
            oA.paused=false;//设为不暂停
            oA.volume=0.1;//设置自动播放的初始音量
            oA.play();//调用play（）方法播放
        }else {//如果未暂停
            clearInterval(timer);//清掉定时器
        }
    }
    timer=setInterval(autoPlay,1);//用定时器触发autoplay自动播放
}

***以上js起效的小前提：Chrome下，用户需要与页面发生任意交互才能触发起效（如：随意点击页面任意地方。猜想：可能谷歌关闭自动播放的初衷是为了引导用户与页面发生更多的交互，但苦逼了程序猿们~）；火狐没问题。

 

解决方案2（方案1改进版）：针对Chrome浏览器类型进行判断，在js触发前，使用模态框作出征询，引发用户与页面的交互行为，从而达到js触发方案的起效（该方案略繁琐，但能彻底实现autoplay）

贴方案2完整代码如下：

    
    

    

    







    

        是
        否
        
提示信息：
        
是否允许本页中的音/视频自动播放？
    

 

解决方案3：设置本地Chrome浏览器参数（只能解决本地自己的浏览器的问题，对用户不友好）

在chrome 浏览器地址栏中输入：chrome://flags，搜索“Autoplay policy”，默认值为“Default”，选择修改为 “No user gesture is required” 重启浏览器就可以了。（用户使用网页时未必知道需要设置浏览器才能看到程序猿写的autoplay效果）

 

---

网上失效的Chrome下的autoplay解决方案：

失效1：设置 muted 属性静音，没效果。

失效2：按F5刷新页面，没效果。

---

以上例子测试环境：

Chrome 版本 71.0.3578.98（正式版本） （64 位）

Firefox  版本64.0 (32 位)