使用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. 【笔记】Win7连接公司内网无法打开网页

    win7尝试使用VPN连接公司内网发现无法打开单点登录网页 DNS解析没问题 服务器也能ping通 查了半天才发现是MTU的问题 win7的默认值1400 公司的华为设备设置的比这个值小 要根据具体的 ...

  2. oracle form lov 查询慢

    设置lov属性,如下:

  3. C# 子类与父类互转注意项

    昨晚在处理父类与子类相互转换时,想把父类转换子类对象,发现编译不通过 ,类定义如下: public interface IPeople { int Age { get; set; } string N ...

  4. AndroidStudio中的读取本地Gradle设置，gradle-wrapper.properties内容解释

    gradle-wrapper.properties文件长成下面这个样子 distributionBase=GRADLE_USER_HOMEdistributionPath=wrapper/distsd ...

  5. 询问chatGPT的一些问题

  6. 修改 Ubuntu 的软件源

    1.将 /etc/apt/ 路径下的 sources.list 的内容修改为如下内容(此内容为 Ubuntu Kylin 里面的内容,直接拿过来用,也可以用其它的国内的源). deb http://m ...

  7. CAD怎么删除图块注释？删除CAD图块注释步骤

    CAD设计过程中,有时候会在图纸中添加许多注释,如:文字注释,图块注释,标注样式注释等.当需要删除图纸中的CAD图块注释时,你知道该如何操作吗?本节课程小编就来给大家分享一下浩辰CAD软件中删除CAD ...

  8. Flink Application Development DataStream API Event Time--Flink应用开发DataStream API事件时间

    目录 概览 事件时间 接下来去哪儿 水印生成 水印策略简介 使用水印策略 处理空闲源 写水印生成代码 写周期WatermarkGenerator代码 写符号形式的WatermarkGenerator代 ...

  9. Posggresql插件Multicorn安装问题总结

    根据官网https://multicorn.readthedocs.io/en/latest/installation.html的安装指南下载安装,关键信息: Postgresql 9.1+ Post ...

  10. babel npm包说明

    babel-plugin-import 用于按需加载,在使用antd 的时候引入,可以减少包体积