使用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. 操作系统实战45讲笔记- 05 CPU工作模式：程序执行的三种模式

    实模式 实模式又称实地址模式,实,即真实,这个真实分为两个方面,一个方面是运行真实的指令,对指令的动作不作区分,直接执行指令的真实功能,另一方面是发往内存的地址是真实的,对任何地址不加限制地发往内存. ...

  2. 【C++】之前学习C++没有注意到的点或者学到了冷知识（待补充）

    1.string和c_str() string str = "hello"; const char* cstr = str.c_str(); str = "yep,i m ...

  3. Jenkins自动化部署（linux环境）---代码提交触发Jenkins构建

    1.在工程中点击构建触发器中选择Generic Webhook Trigger,填写token 2.gitee配置Webhook 选择gitee项目中的Settings->Webhooks> ...

  4. guide, manual, tutorial之间的区别

    总结:一般而言,guide表示用户指南,提供简要的信息:manual表示用户手册,提供较为完整深入的说明:tutorial表示教程,提供详细的说明,侧重于给没有经验的人一步一步进行详细的指导.实际情况 ...

  5. 《Vue.js 3.x高效前端开发（视频教学版）》源码课件同步教学视频免费下载

    <Vue.js 3.x高效前端开发(视频教学版)>源码课件同步教学视频免费下载.获得出版社和作者授权,可用于个人学习使用,禁止任何形式的商用.

  6. Kubernetes学习笔记（三）

    [查看某个node上的pod] > kubectl get pods -o wide --namespace=kube-system | grep master-0         #node ...

  7. httprunner运行遇到彻底解决安装包过程中的Requirement already satisfied:问题

    deMacBook-Pro:bndcs yuansanmei$ python3 -m pip install httprunner==v4.3.0Requirement already satisfi ...

  8. C/C++/中宏特殊字符的含义及用法总结（“#”、“##”、"#@"、“\”等等）

    在C/C++中,宏定义是由define完成的,宏定义中有几种常见的特殊字符需要我们了解,常用的特殊字符有以下几种: #:在宏展开的时候会将#后面的参数替换成字符串: 字符串化##:将前后两个的单词拼接 ...

  9. 关于el-dialog弹窗组件关闭报错事件

    以下写法,向父组件抛出关闭事件, (正常点击弹窗footer的关闭时没有报错,但是点击空白处及右上角的×号,就会报以上错误) 原因, close事件为已经关闭了弹窗后的事件,官方还给出了  befor ...

  10. Assetbundle 打包加载场景

    public class CreateAssetBundle : Editor{ // 打包unity场景文件 [MenuItem("Assets/Build AssetBundle Sce ...