解决google浏览器自动播放问题,亲测可用!!

解决谷歌浏览器自动播放问题

前言:

页面video视频属性设置了autoplay="true"后,用chrome浏览时发现竟然不会自动播放,原因是2018 年 4 月份发布的 chrome 66 也正式宣布关闭音频自动播放。

1:需求来源

为了满足客户需求(非一般客户,** 你个 **)在完美影响用户体验的情况下解决谷歌浏览器自动播放音频问题,下面是自己的一个demo :

// 以下就是自己的实现,(当然了跟广大网友的配合是分不开的,至于参考谁的我也记不得了,在这里谢过了)
<audio src="D:\CloudMusic\audio.mp4" muted autoplay loop id="myPlay" style="display: none"></audio>
<script>
/*
* muted 静音
* autoplay 自动播放
* loop 循环播放
*/
var audio = document.getElementById('myPlay');
var t1 = 3e3;//如果是轮询,这个时间必须大于音频的长度。如果是webscoket,应该设置一个状态play,避免重复播放,如下:
var t2 = 2500;//音频的长度,确保能够完整的播放给用户
var play = false;
function run(){
    if(play){
        return false;
    }
    audio.currentTime = 0;//播放音频的起始时间
    audio.volume = 0.5;//音频声音大小
    audio.muted = false;//关闭静音状态
    play = true;
    setTimeout(function(){
        play = false;
        audio.muted = true;//播放完毕,开启静音状态
    },t2);
}
setInterval(function(){
    run();
},t1);
</script>

你以为这就完了?

写完html放入浏览器会发现,只有用户与浏览器交互后才会触发音效,所以我们还有要设置浏览器操作。

旧版的浏览器会有以下操作:

1: 地址栏访问:chrome://flags

2:搜索栏搜索:Autoplay policy

把【Default】修改为【No user gesture is required】即可!
这样,我们的Chrome浏览器就会自动播放添加了autoplay="true"属性的video/audio了!

如果这样还不可以,那么恭喜你,你的浏览器是新的版本,这些功能已经不存在了。继续往下看吧!

如果发现1不可行,执行以下操作

如图所示,点击浏览器打开网站设置

图片: :
在这里插入图片描述

Alt

执行以上操作后浏览器可自动播放音频,本人已测试!可用。

原创: 转载请附带链接。

评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值