使用js调用音频文件报错，错误信息如下：
play() failed because the user didn’t interact with the document first
该报错是浏览器对于自动播放限制抛出的：play方法调用失败，因为用户没有先操作文档【用户没有先去跟网页做交互再执行音频播放】

解决方式：

构建 DOM 元素时先设置 muted="muted" 属性，调用 play 后再修改静音属性试下是否可以正常

<video id="vi" muted=“muted” controls="controls" autoplay = "autoplay"></video>

play() failed because the user didn‘t interact with the document first的更多相关文章

  1. 音频播放时出现 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

    <audio id="play" controls="controls" loop="loop"> <source src ...

  2. Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

    最近在开发一个网站时,有个需要是 如果有新预警信息要在网页中播放提示音.页面打开会请求是否有新信息,有则播放提示音.在Chrome的最新浏览器中,播放会报错,控制台显示Uncaught (in pro ...

  3. 需求：在浏览器加载完毕后，自动播放视频：出现play() failed because the user didn't interact with the document first.错误

    解决方法:给video标签加入<video muted></video> 静音即可. Chrome 66为了避免标签产生随机噪音. 参考链接:https://juejin.im ...

  4. ERROR [localhost-startStop-1] - Context initialization failed org.springframework.beans.factory.BeanDefinitionStoreException: IOException parsing XML document from ServletContext resource [/WEB-INF/ap

    ERROR [localhost-startStop-1] - Context initialization failed org.springframework.beans.factory.Bean ...

  5. JS自动播放音频 无效chrome设置 （Uncaught (in promise) DOMException: play() failed because the user didn't interact）

    Chrome的autoplay政策在2018年4月做了更改.新的行为:浏览器为了提高用户体验,减少数据消耗,现在都在遵循autoplay政策,Chrome的autoplay 政策非常简单 muted ...

  6. Chrome 声音自动播放抱错问题【play() failed】

    Chrome下调用play后抱错:DOMException: play() failed because the user didn't interact with the document firs ...

  7. [JavaScript] audio在浏览器中自动播放

    audio 在浏览器中自动播放 autoplay 属性 autoplay 属性规定一旦音频就绪马上开始播放. 如果设置了该属性,音频将自动播放. 使用 autoplay 属性进行播放 //使用auto ...

  8. [JavaScript] html5 video标签注意事项

    Chrome 66 禁止声音自动播放 声音无法自动播放这个在IOS/Android上面一直是个惯例,桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在2018年 ...

  9. selenium如何处理H5视频

    selenium处理H5视频主要使用的是javascript,javascript函数有内置的对象叫arguments,arguments包含了调用的参数组,[0]代表取第一个值. currentSr ...

  10. 网页视频不能自动播放？HTML5 video报错Uncaught (in promise) DOMException解决方法

    话说发哥四年前写了一个网页,如上图效果,实际网址http://pano.z01.com ,话说做好时是正常的,突然某一天,客户说你这个网站动画不见了,这是什么原因? 结果检查脚本一切正常. 其实也不是 ...

随机推荐

  1. MyBatis(Plus) 打印SQL, 分析执行时间

    MyBatis/MyBatis Plus打印的SQL调试起来比较麻烦 当然IDEA/eclipse都有类似mybatis log plugin这种插件来解析, 但是安装插件有些许弊端, 就写了个工具类 ...

  2. Vulnhub 靶场 DARKHOLE: 2

    Vulnhub 靶场 DARKHOLE: 2 前期准备 前期准备: 靶机地址:https://www.vulnhub.com/entry/darkhole-2,740/ kali攻击机ip:192.1 ...

  3. tapdata问题

    聚合节点写两个不同的聚合函数,只需要在关联目标节点的目标字段中添加上分组字段,其他字段不用做关联 聚合节点写两个相同的聚合函数,只需要在关联目标节点的目标字段中左右两边都添加上_id,会输出两条数据, ...

  4. 采集地图商家电话，导出到excel

    快速的把高德地图左边的搜索列表里的商家地图,电话,导出到EXCEL里. 采集地图商家电话,可以快速提高销售人员的业绩. 如何快速地将高德地图里的商家电话资料导出EXCEL? 操作步骤: 1. 选择你要 ...

  5. RayLink测评 | 完全免费，功能超越同类付费远程控制软件!!

    *本文转载自自媒体[下1个好软件],作者:锋哥. 远程控制软件目前的需求非常大,因为某些原因,你可能得居家办公远程控制公司的电脑,又或者出差不再需要带笨重的笔记本办公,一台平板电脑远程就搞定等等. 但 ...

  6. unity 调试 packages

    package中代码vs无法f12跳转 解决方法 1 把包copy出来 2 Package Manager->Add package from disk 3 选择包文件中的package.jso ...

  7. nginx的301与302跳转详细配置教程

    什么是301跳转 301跳转也叫301重定向,也叫301转向,也叫301永久重定向,是网站建设过程中的一个功能.一般用于2个域名指向同一个网站. 一般来说,利用跳转,对网站的排名不会有影响.但不会转移 ...

  8. js内置方法

    数组:        1.push()数组最后添加元素,pop()数组删除最后一个: unshift()数组开头添加元素,shift()删除数字第一个: 注意:push()和unshift()可以添加 ...

  9. 765. 情侣牵手 (Hard)

    问题描述 765. 情侣牵手 (Hard) n 对情侣坐在连续排列的 2n 个座位上,想要牵到对方的手. 人和座位由一个整数数组 row 表示,其中 row[i] 是坐在第 i 个座位上的人的 ID. ...

  10. mongodb添加删除节点及仲裁节点

    温馨提示:此mongodb版本为5.0.11 ,并注意,如果要删除节点,可以直接删除,添加节点前要先删除仲裁节点. rs.remove("192.168.0.180:27017") ...