关于谷歌浏览器不支持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 ...
随机推荐
- ReactRouter的实现
ReactRouter的实现 ReactRouter是React的核心组件,主要是作为React的路由管理器,保持UI与URL同步,其拥有简单的API与强大的功能例如代码缓冲加载.动态路由匹配.以及建 ...
- MATLAB中load和imread的读取方式区别
load是导入文件,一般从mat文件中,读取的是结构体imread是图像处理工具箱的库函数,处理图像比较方便,读取的是矩阵 1.之前将数组或者矩阵保存为一个mat格式的文件,在进行load命令读取时: ...
- VMware虚拟机提示“以独占方式锁定此配置文件失败”!!!
VMware异常关闭后再次启动提示"以独占方式锁定此配置文件失败"!!! 前几日在使用VMware虚拟机的时候,虚拟机突然出现了卡顿,然后就把电脑关机了重启,结果再次打开虚拟机的时 ...
- 如何使用 Vuepress
项目结构 ├─docs │ ├─.vuepress --vuepress相关文件路径 (主要配置) │ │ ├─dist --build 打包生成路径 (自定义) │ │ ├─nav --导航条配置 ...
- Python 2.x 和 Python 3.x
Python 2.x 默认不支持中文,具体原因,等到介绍 字符编码 时给大家讲解 Python 2.x 的解释器名称是 python Python 3.x 的解释器名称是 python3 目前市场上有 ...
- 算法总结篇---字典树(Trie)
目录 写在前面 具体实现 引例: 引例代码: 例题 Phone List Solution: The XOR Largest Pair Solution L语言 Solution: 写在前面 字典树是 ...
- luoguP4999 烦人的数学作业
写在前面 这两天信息量有点大,需要好好消化一下,呼呼 \(f[i][j]\) 的转移式还是好理解的,但是对于其实际意义课上有点糊 求 \(ans_{1, x}\) 是感觉手动把数拆开看会好理解一点?? ...
- vue3系列:vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件
基于Vue3.0构建PC桌面端自定义美化滚动条组件V3Scroll. 前段时间有分享一个Vue3 PC网页端弹窗组件,今天带来最新开发的Vue3.0版虚拟滚动条组件. V3Scroll 使用vue3. ...
- Docker是如何实现隔离的
Docker是如何实现隔离的 2.进程的隔离 4.文件的隔离 5.资源的限制 7.与传统虚拟机技术的区别 原文地址: 微信公众号:<鲁智深菜园子>:Docker是如何实现隔离的 # 1.运 ...
- Prometheus—告警altermanger
Prometheus-告警altermanger 1.告警altermanger装配 2.告警Mysql 3.Prometheus针对nodes告警规则配置 相关内容原文地址链接: 51CTO:wfw ...