使用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. ADC采样信号RMS测量值的Verilog实现

    术语"RMS"代表"Root-Mean-Squared".大多数书籍将此定义为"产生与等效直流电源相同的加热效果的交流电量",或者沿着这些线 ...

  2. 如何查看nvidia官网发布的tensorrt镜像中都包含哪些包，trt版本是多少，cuda版本是多少？如何查看nvidia官网发布的triton镜像中都包含哪些包?

    在这里查看trt镜像中包含哪些内容:https://docs.nvidia.com/deeplearning/tensorrt/container-release-notes/rel_21-07.ht ...

  3. 攻防世界-file_include（绕过base64）

    有简单过滤防护的文件包含  一.源码分析 易知$filename处可能会存在文件包含漏洞.但注意到include了一个./check.php文件,猜测可能有过滤.先不管,于是直接使用普通payload ...

  4. [Oracle19C ASM管理] ASM的存储管理

    安装过程中,选择的OMF自动管理文件.可以看到存储放在ASM的根下. SQL> show parameter db_create_file_dest; NAME TYPE VALUE db_cr ...

  5. vue高级进阶( 一 ) 组件精髓概述

    前言 这个系列可能会分为几部分: 基础以及高级用法总结 一些比较有代表性的实战 源码解析(一定是用最粗俗,不对,是最通俗的语言讲解,这个我可以保证) 总之一定对得起高级进阶这几个字... 组件分类 v ...

  6. JMeter 三- Run JMeter in non-GUI mode

    Run Jmeter in non-GUI mode: 1. Swith to \Jmeter\bin 2. run "jmeter -n -t E:\JmeterforLoadGenesi ...

  7. 头条二面：宕机后，Redis如何实现快速恢复？

    Redis作为非常火热的内存数据库,其除了具有非常高的性能之外,还需要保证高可用,在故障发生时,尽可能地降低故障带来的影响,Redis也提供了完善的故障恢复机制:哨兵.下面就来具体来看看Redis的故 ...

  8. Vulnhub 靶机 CONTAINME: 1

    Vulnhub 靶机 CONTAINME: 1 前期准备: 靶机地址:https://www.vulnhub.com/entry/containme-1,729/ kali地址:192.168.147 ...

  9. Truenas Core安装（DOS界面）

    下载ISO安装包 搜索truenas core ,找到网站www.truenascore.com,根据网站导航栏指示,点击menu--software--truenas core--download ...

  10. Visual Studio常用的宏

    $(SolutionDir) 表示获取解决方案文件.sln所在文件夹 $(ProjectDir 获取项目工程文件.vcxproj所在文件夹 $(Configuration) 获取编译后的Debug / ...