关于谷歌浏览器不支持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 ...
随机推荐
- JS实现植物大战僵尸小游戏,代码记录及效果展示
前几天看到了一个很有趣的demo,用js制作植物大战僵尸小游戏,本着学习的心态,对照着做了一下,发现这里面的一些代码设计的确很精妙,这里分享下源码和效果,如果有需要,可以看下. 效果如下: 下载地址
- 使用 .NETCore自带框架快速实现依赖注入
Startup 在Startup的ConfigureServices()中配置DI的接口与其实现 public void ConfigureServices(IServiceCollection se ...
- Java并发包源码学习系列:阻塞队列实现之ArrayBlockingQueue源码解析
目录 ArrayBlockingQueue概述 类图结构及重要字段 构造器 出队和入队操作 入队enqueue 出队dequeue 阻塞式操作 E take() 阻塞式获取 void put(E e) ...
- kotlin和python哪个好!程序员怎样优雅度过35岁中年危机?满满干货指导
导语 学历永远是横在我们进人大厂的一道门槛,好像无论怎么努力,总能被那些985,211 按在地上摩擦! 不仅要被"他们"看不起,在HR挑选简历,学历这块就直接被刷下去了,连证明自己 ...
- E2.在shell中正确退出当前表达式
E2.在shell中正确退出当前表达式 优雅退出当前表达式 在shell里面输出复杂的多行表达时,经常由于少输入一个引号,一直无法退出当前的表达式求值,也没有办法终止它,以前只能通过两次Ctrl+C结 ...
- 手写Netty之多路复用Select小案例
注意:本文只是将上文多路复用器Select.Poll.Epoll区别梳理中提出的概念与Netty中的步骤联系起来,方便后面回顾,代码中注释很多,对于大家来说如果不是怀有同样的目的,不一定有用. 单线程 ...
- 电脑打不开gitHub的解决方法
电脑打不开gitHub的解决方法 方法:修改本地的hosts文件 因为Github是国外网站,所以经常会遇到打不开的问题,并且有时能打开但是网速好慢 解决这个问题的方法是 : C:\Windows ...
- 找出10000内的素数 CSP
"Problem: To print in ascending order all primes less than 10000. Use an array of processes, SI ...
- InnoDB 事务隔离级探索
https://mp.weixin.qq.com/s/gWYL2Th9Go5LDhkyGB_rYQ
- 【LinuxShell】命令行常用快捷键
Ctrl + A :光标跳到一行命令的开头.一般来说,Home 键有相同的效果: Ctrl + E :光标跳到一行命令的结尾.一般来说,End 键有相同的效果:. Ctrl + U :删除所有在光标左 ...