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

发布于 2019-12-31  153 次阅读


今天学习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>

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

Firefox火狐浏览器权限设置,阻止网站自动播放声音
Firefox火狐浏览器权限设置

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

  1. 在Chrome 浏览器地址栏中输入: chrome:// flags /#autoplay-policy
  2. 将Autoplay policy" 的 "Default" 更改为 "No user gesture is required"
  3. 点击 "relaunch" ,重新启动浏览器
Google浏览器autoplay的解决方法
Google浏览器autoplay解决方案

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

Chrome浏览器设置网页自动播放声音位置
Chrome浏览器设置网页自动播放声音

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

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

万物皆有裂痕,那正是光照进来的地方
最后更新于 2020-02-13