关于谷歌浏览器不支持html5中audio的autoplay解决方法(js代码解决)
当我们直接写autoplay时,在chrome中浏览器并没有自动播放音频;

如果直接通过js来调用audio的play()方法也不行;

控制台还会报错

大概意思:play()调用失败,因为用户没有与文档进行交互
经过网上的查找:原博客:https://blog.csdn.net/baiding1123/article/details/104945759
谷歌为优化用户体验关闭了audio中的autoplay方法(屏蔽广告和节省用户流量);
那么如何实现autoplay呢,既然报错说用户没有与文档交互,我们就设置一个事件使用户与文档交互就行了;如下给整个页面添加一个点击事件

此时,当用户点击页面后就会触发play();chrome也不会报错,并且开始播放音乐

亲测把onclick事件换成onmousemove后(想优化用户体验),但还是需要点击页面才能触发play(),相当于把audio的点击播放绑定在整个window上面;
借鉴此博客的更改:https://blog.csdn.net/baiding1123/article/details/104945759
关于谷歌浏览器不支持html5中audio的autoplay解决方法(js代码解决)的更多相关文章
- 检测是否支持HTML5中的Video标签
//检测是否支持HTML5 function checkVideo() { if (!!document.createElement('video').canPlayType) { var vidTe ...
- 让IE8支持html5中的video标签
这是一篇综合几个前辈的解决方案. 使用video的时候,要遇到的问题. ①不兼容ie9及其以下版本 在<head>里添加两行, 参考张鑫旭前辈的博客,但是在ie8中薄播放. <!-- ...
- ASP.NET开发中主要的字符验证方法-JS验证、正则表达式、验证控件、后台验证
ASP.NET开发中主要的字符验证方法-JS验证.正则表达式.验证控件.后台验证 2012年03月19日 星期一 下午 8:53 在ASP.NET开发中主要的验证方法收藏 <1>使用JS验 ...
- HTML5中 audio标签的样式修改
由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,那么要怎么改变这个样式呢,其实它的原理比 ...
- html5中audio的详细使用
html5的audio功能上已经非常强大,回放,跳转,缓冲等以前只能用flash才能实现的功能,html5的audio都能轻松搞定 最近的一个项目使用到了这个功能,把我使用的情况写下来,供大家参考, ...
- 关于HTML5中audio标签在手机中的autoplay
这个问题是我最头疼的: 问题描述:在开发手机网页的时候,苹果和三星的一些浏览器不能自动开始播放 解决办法:在这个页面上弹出一个层来触发audio标签的play()方法,或者你还可以 谷歌一下----& ...
- js解决IE8不支持html5,css3的问题(respond.js 的使用注意)
IE8.0及以下不支持html5,css3的解析.目前为止IE8以下的版本使用率在10%左右,网站还是有必要兼容的. 1,在你的所有css最后判断引入两个js文件. html5.js 是用来让ie8 ...
- HTML5 中的新属性autocomplete="off"失效的解决方法(兼容firefox,IE,360)
因为业务需求,在写一个注册页面的时候,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便.加了HTML5 中的新属性autocomplete="off" ,但是并没有产 ...
- 问题:eclipse中线程编程编译报错,undefined reference to 'pthread_create'的解决方法(已解决)
问题描述: 在Ubuntu系统中,使用eclipse CDT集成开发环境编写pthread程序,编译时,pthread_create不通过,报错信息是: undefined reference to ...
随机推荐
- 通过电脑浏览器调试真机h5兼容问题
前言 在h5开发过程中,起初我们使用PC浏览器的手机模式打开开发中的页面,并使用控制台进行调试,但实际真机兼容性问题无法调试到:在这种情况下,我们通常使用vConsole(即移动端的控制台)来调试,但 ...
- 处理K8S PVC删除后pod报错
报错如下 Jun 19 17:15:18 node1 kubelet[1722]: E0619 17:15:18.381558 1722 desired_state_of_world_populato ...
- TCP客户端程序
TCP客户端程序的函数调用顺序为:socket -> connect -> send/recv socket.send和recv函数在TCP服务器程序中已经说过了,这里就不赘述了. con ...
- VMwareWorkstation 平台 Ubuntu14 下安装配置 伪分布式 hadoop
VMwareWorkstation平台Ubuntu14下安装配置伪分布式hadoop 安装VmwareStation 内含注册机. 链接:https://pan.baidu.com/s/1j-vKgD ...
- autocommit 隔离级别 next lock gap lock 事务隔离级别和锁
autocommit 隔离级别 https://www.ibm.com/developerworks/cn/opensource/os-mysql-transaction-isolation-leve ...
- LOJ10144宠物收养所
HNOI 2004 最近,阿 Q 开了一间宠物收养所.收养所提供两种服务:收养被主人遗弃的宠物和让新的主人领养这些宠物. 每个领养者都希望领养到自己满意的宠物,阿 Q 根据领养者的要求通过他自己发明的 ...
- 使用 shell 脚本自动对比两个安装目录并生成差异补丁包
问题的提出 公司各个业务线的安装包小则几十兆.大则几百兆,使用自建的升级系统向全国百万级用户下发新版本时,流量耗费相当惊人.有时新版本仅仅改了几个 dll ,总变更量不过几十 K 而已,也要发布一个完 ...
- SpringBoot-Maven打包压缩瘦身
SpringBoot-Maven打包压缩瘦身 一.Spring Boot 可执行 jar 分析 1.1 打包 1.2 两种 jar 的比较 1.3 一次打包两个 jar 二.SpringBoot迭代发 ...
- brew更换国内源
来源:清华大学开源软件镜像站(https://mirror.tuna.tsinghua.edu.cn/help/homebrew/) 替换现有上游 1 # brew 程序本身,Homebrew/Lin ...
- 查看Linux用的桌面是GNOME、KDE或者其他(转)
http://superuser.com/questions/96151/how-do-i-check-whether-i-am-using-kde-or-gnome 1) pgrep -l &quo ...