关于H5 的video、audio标签autoplay属性失效

今天学习H5的时候，想在打开页面时候自动播放背景音乐的功能， 结果使用了audio标签的autoplay属性后，在谷歌浏览器打开后发现网页并没有播放音乐，而在Edge浏览器里却可以自动播放，当时的代码如下：

<div class="music">
        <audio id="music" src="music/Happy.mp3" autoplay="autoplay" loop="loop">你的浏览器不支持audio标记。</audio> 
</div>

百度了一下后，发现 Chrome在2018年4月份更新后关闭了audio、video媒体标签的autoplay自动播放 ， 这个改变是在Google Chrome版本66开始的时候，不再自动开始播放音频和视频文件，阻止对广告视频和其他烦人的网页元素进行自动播放，原因大概是为了提高用户体验，防止一进入网页会自动播放声音过大的音频。在之后测试发现火狐浏览器也有类似情况发生。

测试后发现，如果使用的是video标签，可以添加 muted属性，这样视频可以自动播放，但是是为静音模式。

    <div class="music">
        <video id="music" src="music/Happy.mp3" muted autoplay="autoplay" loop="loop">你的浏览器不支持video标记。</audio> 
    </div>

或者在video、audio标签里使用controls属性，设置该属性页面上会显示播放控件，这样可以通过和用户交互，让用户选择音视频是播放还是暂停。

    <div class="music">
        <audio id="music" src="music/Happy.mp3" controls="controls" autoplay="autoplay" loop="loop">你的浏览器不支持audio标签。</audio> 
    </div>

在火狐浏览器中，可以到选项里的权限进行设置：

如果想要在Chrome浏览器里使autoplay属性生效，则需设置本地Chrome浏览器参数（只能解决本地自己的浏览器的问题)

1. 在Chrome 浏览器地址栏中输入： chrome：// flags /＃autoplay-policy
2. 将Autoplay policy" 的 "Default" 更改为 "No user gesture is required"
3. 点击 "relaunch" ，重新启动浏览器

这里再附上最新的Google浏览器打开网页自动播放声音设置的方法，在浏览器右上角三个点的图标里打开设置页面，找到高级→隐私设置和安全性→权限→声音，点击旁边的图标可进去设置：

另附网上使用js解决的方法链接： https://blog.csdn.net/badmoonc/article/details/86529752

本站文章由渡缘人原创，如若转载请注明原文及出处：
https://www.hygrey.com/autoplay-become-invalid.html