关于谷歌浏览器不支持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 ...
随机推荐
- 笔记 | 吴恩达新书《Machine Learning Yearning》
这本书共112页,内容不多,偏向于工程向,有很多不错的细节,在此记录一下. 0 书籍获取 关注微信公众号"机器学习炼丹术",回复[MLY]获取pdf 1 测试集与训练集的比例 2 ...
- SDNU_ACM_ICPC_2021_Winter_Practice_4th [个人赛]
传送门 D - Odd Divisor 题意: 给你一个n,问你n是否至少有一个奇数因子(这里题意没说清,没说是不是只有一个还是可以有多个!AC以后才发现是不止一个 思路: 如果这个数没有奇数因子,那 ...
- flume agent的内部原理
flume agent 内部原理 1.Source采集数据,EventBuilder.withBody(body)将数据封装成Event对象,source.getChannelProcessor( ...
- 分布式跟踪的一个流行标准是OpenTracing API,该标准的一个流行实现是Jaeger项目。
https://github.com/jaegertracing/jaeger https://mp.weixin.qq.com/s/-Tn2AgyHoq8pwMun8JHcGQ Jaeger的深入分 ...
- Redis下载及安装(windows版)
下载地址1.Github下载地址:https://github.com/MicrosoftArchive/redis/releases2.百度网盘下载地址 https://pan.baidu.com/ ...
- RocketMQ 常用消息类型
文章首发于公众号<程序员果果> 地址 : https://mp.weixin.qq.com/s/dYqGd9zi2mNelsNNLIribg 消息发送示例 导入依赖: <depend ...
- OpenStack (haproxy)
openstack部署脚本 链接:<https://pan.baidu.com/s/1BTp_tGNC6ZWwVmKkhwivgw > 提取码:jxuz haproxy 官网:< h ...
- CyclicBarrier---可重用的循环栅栏
很多文章只是提了下可重用,具体这个栅栏怎么可重用的,很多没有说明,这里会解开你的疑惑. CyclicBarrier是一个同步工具类,它允许一组线程互相等待,直到达到某个公共屏障点.与CountDown ...
- java面试必备String详解
引言 众所周知在java里面除了8种基本数据类型的话,还有一种特殊的类型String,这个类型是我们每天搬砖都基本上要使用它. String 类型可能是 Java 中应用最频繁的引用类型,但它的性能问 ...
- 使用Observer实现HBase到Elasticsearch的数据同步
最近在公司做统一日志收集处理平台,技术选型肯定要选择elasticsearch,因为可以快速检索系统日志,日志问题排查及功业务链调用可以被快速检索,公司各个应用的日志有些字段比如说content是不需 ...