当我们直接写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代码解决)的更多相关文章

  1. 检测是否支持HTML5中的Video标签

    //检测是否支持HTML5 function checkVideo() { if (!!document.createElement('video').canPlayType) { var vidTe ...

  2. 让IE8支持html5中的video标签

    这是一篇综合几个前辈的解决方案. 使用video的时候,要遇到的问题. ①不兼容ie9及其以下版本 在<head>里添加两行, 参考张鑫旭前辈的博客,但是在ie8中薄播放. <!-- ...

  3. ASP.NET开发中主要的字符验证方法-JS验证、正则表达式、验证控件、后台验证

    ASP.NET开发中主要的字符验证方法-JS验证.正则表达式.验证控件.后台验证 2012年03月19日 星期一 下午 8:53 在ASP.NET开发中主要的验证方法收藏 <1>使用JS验 ...

  4. HTML5中 audio标签的样式修改

    由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,那么要怎么改变这个样式呢,其实它的原理比 ...

  5. html5中audio的详细使用

    html5的audio功能上已经非常强大,回放,跳转,缓冲等以前只能用flash才能实现的功能,html5的audio都能轻松搞定 最近的一个项目使用到了这个功能,把我使用的情况写下来,供大家参考, ...

  6. 关于HTML5中audio标签在手机中的autoplay

    这个问题是我最头疼的: 问题描述:在开发手机网页的时候,苹果和三星的一些浏览器不能自动开始播放 解决办法:在这个页面上弹出一个层来触发audio标签的play()方法,或者你还可以 谷歌一下----& ...

  7. js解决IE8不支持html5,css3的问题(respond.js 的使用注意)

    IE8.0及以下不支持html5,css3的解析.目前为止IE8以下的版本使用率在10%左右,网站还是有必要兼容的. 1,在你的所有css最后判断引入两个js文件. html5.js  是用来让ie8 ...

  8. HTML5 中的新属性autocomplete="off"失效的解决方法(兼容firefox,IE,360)

    因为业务需求,在写一个注册页面的时候,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便.加了HTML5 中的新属性autocomplete="off" ,但是并没有产 ...

  9. 问题:eclipse中线程编程编译报错,undefined reference to 'pthread_create'的解决方法(已解决)

    问题描述: 在Ubuntu系统中,使用eclipse CDT集成开发环境编写pthread程序,编译时,pthread_create不通过,报错信息是: undefined reference to ...

随机推荐

  1. mysql(连接查询和数据库设计)

    --创建学生表 create table students ( id int unsigned not null auto_increment primary key, name varchar(20 ...

  2. try-catch-finally中的4个大坑,不小心就栽进去了!

    在 Java 语言中 try-catch-finally 看似简单,一副人畜无害的样子,但想要真正的"掌控"它,却并不是一件容易的事.别的不说,咱就拿 fianlly 来说吧,别看 ...

  3. Jmeter接口自动化测试系列之函数使用及扩展

    介绍一下Jmeter自带函数的使用和 函数扩展,来满足测试工作中的各种需求! Jmeter自带函数 点击函数帮助助手图标,弹出函数助手框,可以选择各种各样的函数 举例: _Random 获取随机数,可 ...

  4. tcp服务器

    如同上面的电话机过程一样,在程序中,如果想要完成一个tcp服务器的功能,需要的流程如下: socket创建一个套接字 bind绑定ip和port listen使套接字变为可以被动链接 accept等待 ...

  5. Java 常见关键字总结:final、static、this、super!

    final,static,this,super 关键字总结 final 关键字 final关键字,意思是最终的.不可修改的,最见不得变化 ,用来修饰类.方法和变量,具有以下特点: final修饰的类不 ...

  6. 20201103gryz模拟赛解题报告

    写在前面 昨天忘写了来补上 T1位运算乱搞一会没搞出来, 打完T4floyd暴力分之后发现T2树状数组可以骗点分 打完T3暴力手模了一遍样例之后发现T3就是个线段树板子 最后就非常愉快的拿到175pt ...

  7. Spark调优 | Spark Streaming 调优

    Spark调优 | Spark Streaming 调优 1.数据序列化 2.广播大变量 3.数据处理和接收时的并行度 4.设置合理的批处理间隔 5.内存优化 5.1 内存管理 5.2优化策略 5.3 ...

  8. 深信服EDR3.2.21任意代码执行

    漏洞原理: dev_linkage_launch.php 为设备联动的新入口点主要是将联动的接口构造成业务统一处理的接口 主要调用 跟进 可以看到 第一个检查为  $req_url = $_SERVE ...

  9. centos设系统置语言为中文

    [root@host /]# vim /etc/sysconfig/i18n #i18n 是 internationalization 的缩写形式,意即在 i 和 n 之间有 18 个字母,本意是指软 ...

  10. linux(7)top命令详细解释

    top命令 Linux top命令用于实时显示 process 的动态. top参数详解 第一行,任务队列信息 系统当前时间:13:52:56 系统开机后到现在的总运行时间:up 66 days,8m ...