解决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不可行，执行以下操作

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

图片: :

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

原创: 转载请附带链接。

解决google浏览器自动播放问题，亲测可用！！相关推荐

【webview】微信和PC监听浏览器关闭和刷新(亲测可用)
监听浏览器关闭和刷新前言 PC端微信端前言最近做的项目里有一个新的需求,在不同的浏览器内打开的网页,监听用户的操作,比如关闭浏览器,刷新浏览器等等. 这就涉及到了几个平台:PC端浏览器,移动端 ...
解决iOS h5 audio自动播放（亲测有效）
微信H5页面,实现audio自动播放: function initMusic() {//动态创建一个audio节点var audio = document.createElement('audio') ...
使用H5Stream实现rtsp视频流播放，在Vue项目中 (无插件、可多视频源播放、亲测可用)
本文主要介绍用H5Stream 在Web页面播放摄像头的RTSP视频流,从0到1的过程.包括WebSocket代理.h5ss.bat文件运行一会就自己卡死了.H5ss服务死掉自动定时重启的脚本等可 ...
安装Office2010提示需要安装MSXML版本6.10.1129.0的解决方法，超简单，亲测可用
在安装Office2010时,提示需要安装MSXML版本6.10.1129.0,可以明明安装了MSXML还是不行,很让人恼火啊.以下方法可以完美解决,而且无需安装MSXML,一键解决. 解决方法: 安 ...
使用charls抓包微信小程序的解决方案（终极解决，各种坑不怕，亲测可用，不服来战！）...
第一步:使用charles进行https抓包 https://www.jianshu.com/p/7a88617ce80b 使用charles进行https抓包使用Charles进行HTTPS抓 ...
解决Win10系统激活office2019时出现 0xc004f074 无法激活问题，亲测可用！！！
Windows 10 系统出现 0xc004f074 无法激活解决方案在win10上卸载老版本的office后,再次安装新版的office,激活时不成功,报错信息是 0xc004f074 检查了我的 ...
已解决Python.selenium爬虫必备设置永久禁止谷歌浏览器自动升级（亲测有效）
问题描述:selenium框架自动化操作浏览器的时候,需要安装浏览器驱动WebDriver,而WebDriver驱动需要对应浏览器的版本才运行.但是我们常用的谷歌浏览器是有自动更新的,就会经常导致We ...
解决chrome浏览器adobe flash player不是最新版本亲测可用的方法
解决chrome浏览器adobe flash player不是最新版本亲测可用的方法参考文章: (1)解决chrome浏览器adobe flash player不是最新版本亲测可用的方法 (2)ht ...
h5微信本地调试 vue_UniApp本地调试H5（谷歌chrome浏览器）跨域问题的解决方法，亲测可用...
UniApp本地调试H5跨域(谷歌chrome浏览器,UniApp内置浏览器不存在此问题)的推荐方案:欺骗浏览器,让浏览器觉得你没有跨域(其实还是跨域了,用的是代理) 客户器端解决方案(亲测可用): ...
vue2.x 播放rtmp,hls,m3u8直播流教程，亲测可用
网上教程挺多,但实际用起来会各种报错大部分原因是依赖的包的版本问题,因此我这里附上亲测可用的版本; 跟着步骤一步一来就行了! step1: 在package.json文件下添加所有关于直播的依赖包, ...

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

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

解决google浏览器自动播放问题，亲测可用！！相关推荐

最新文章

热门文章