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

最新推荐文章于 2024-01-25 12:29:03 发布

willsir

最新推荐文章于 2024-01-25 12:29:03 发布

阅读量1.1w

点赞数 7

分类专栏： H5 文章标签： autoplay audio Chrome video play()

本文链接：https://blog.csdn.net/weixin_44093239/article/details/85803103

版权

H5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章更新自2019年01月05日

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

demo：

<audio id="a1" controls="controls" autoplay="autoplay">
    <source src="music.mp3">
</audio>

表现不同：

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

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

原因：

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

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

html：
<audio id="a1" controls="controls">
 <source src="music.mp3"> 
</audio>

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完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio和video在Chrome下的自动播放解决方案</title>

    <style>
        /*模态框的样式*/
        .modal {
            position: fixed;
            font-family: Arial, Helvetica, sans-serif;
            top:0;
            right:0;
            bottom:0;
            left:0;
            background:rgba(0,0,0,0.8);
            z-index:99999;
            opacity:1;
            -webkit-transition: opacity 400ms ease-in;
            -moz-transition: opacity 400ms ease-in;
            transition: opacity 400ms ease-in;
            pointer-events: auto;
        }
        .none{
            opacity: 0;
            pointer-events: none;
        }
        .modal > div {
            width:400px;
            position: relative;
            margin:10% auto;
            padding:5px 20px 13px 20px;
            border-radius:10px;
            background:#fff;
            background: -moz-linear-gradient(#fff, #999);
            background: -webkit-linear-gradient(#fff, #999);
            background: -o-linear-gradient(#fff, #999);
        }
        .yes,.no {
            background:#606061;
            color:#FFFFFF;
            line-height:25px;
            position: absolute;
            right: -12px;
            text-align: center;
            top: -10px;
            width:24px;
            text-decoration: none;
            font-weight: bold;
            -webkit-border-radius:12px;
            -moz-border-radius:12px;
            border-radius:12px;
            -moz-box-shadow:1px 1px 3px #000;
            -webkit-box-shadow:1px 1px 3px #000;
            box-shadow:1px 1px 3px #000;
        }
        .no{
            right: 24px;
        }
        .yes:hover, .no:hover{ background:#00d9ff;}
    </style>

    <script>
        window.onload=function () {
            let oA=document.querySelector("#a1");

            let oModal=document.querySelector("#modal");
            let oYes=document.querySelector("#yes");
            let oNo=document.querySelector("#no");

            let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串

            //chrome下的判断
            if (userAgent.indexOf("Chrome") > -1){//判断是否是Chrome浏览器
                //alert("我是 Chrome");
                oModal.className="modal";
                oYes.onclick=function () {//选择是
                    oModal.className="none";//隐藏模态框
                    let timer=null;
                    function autoPlay() {//自动播放函数
                        if (oA.paused) { //判读是否暂停
                            oA.paused=false;
                            oA.volume=0.1;
                            oA.play();
                        }else {
                            clearInterval(timer);
                        }
                    }
                    timer=setInterval(autoPlay,1);//执行自动播放
                };
                oNo.onclick=function () {//选择否
                    oModal.className="none";//隐藏模态框，无自动播放
                }
            }
        }
    </script>
</head>
<body>
<!--音频-->
<audio id="a1" controls="controls" autoplay="autoplay" src="resource/johann_sebastian_bach_air.mp3"></audio>

<!--模态框-->
<div id="modal" class="none">
    <div>
        <a id="yes" href="#" title="YES" class="yes">是</a>
        <a id="no" href="#" title="NO" class="no">否</a>
        <h2>提示信息：</h2>
        <p>是否允许本页中的音/视频自动播放？</p>
    </div>
</div>

</body>
</html>

解决方案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 位)

willsir

关注

7
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
（Chrome下autoplay失效）谷歌、火狐浏览器对audio、video标签的autoplay自动播放属性不同的支持表现-解决方案

文章更新自2019年01月05日最近学习到H5的audio与video两个媒体标签，遇到Chrome和Firefox浏览器下对autoplay属性有不同的支持表现demo：&lt;audio id="a1" controls="controls" autoplay="autoplay"&gt; &lt;source src="music.mp3"&gt;&lt;/
复制链接

扫一扫

专栏目录