Vue audio 播放音频报错 Uncaught (in promise) DOMException

weixin_38053499 2019-04-24 06:35:42

image.png928×547 13.6 KB

...全文

3581 1 打赏收藏转发到动态举报

写回复

用AI写文章

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

weixin_38062190 2019-04-24

打赏
举报

Chrome 默认不会非用户触发的自动播放音频，.play()返回的 promise 会被 rejected，如果没有 catch 这个异常的话，就会这样参考 https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play

一、vue中解决chrome浏览器自动播放音频需求有新订单的时候，页面自动语音提示和弹出提示框；问题 chrome浏览器在18年4月起，就在桌面浏览器全面禁止了音视频的自动播放功能。严格地来说，是Chrome不允许在用户对网页进行触发之前播放音频。不光是这样，在页面加载完毕的情况下，用户没有click、dbclick、touch等主动交互行为，使用js直接调用.play() 方法的话，chrome都会抛出如下错误：Uncaught (in promise) DOMException；解决在网上找了很多方法都不行，最后试出一种可行：语音播放显示出来才可以自动播放语音，如下图；上代码

原文：https://blog.csdn.net/Mariosss/article/details/8786...

课程目标：多面学习Vue.js技术栈，包括：1. 数据绑定、模板、指令、过滤器、vue生命周期及实例的属性和方法2. 组件及组件间的通信、发送HTTP请求3. vue-router及vue-cli和单文件组件4. Element UI及Vuex的使用5. 项目结构的搭建与开发课程简介：基于Vue.js 2.3版本，目前最全的Vue.js教学视频，让你少走弯路，直达技术前沿！多面讲解Vue.js全家桶（vue.js、vue-router、axios、vuex、vue-cli、webpack、ElementUI等）课程内容包含：1. 数据绑定、模板、指令、过滤器、vue生命周期及实例的属性和方法2. 组件及组件间的通信、发送HTTP请求3. vue-router及vue-cli和单文件组件4. Element UI及Vuex的使用5. 项目结构的搭建与开发教学全程采用笔记+代码案例的形式讲解，通俗易懂！！！细节参考1.vue环境搭建及入门程序2计算、监听及vue-tools的安装3样式绑定4style与删除操作5筛选和过滤6传播行为与事件7使用vue绑定表单输入与vue生命周期8过渡效果与过滤器9自定义指令与自定义插件10vue脚手架vuecli的安装与启动11vuecli源码解读与eslint12状态管理组件vuex13状态管理功能扩展14状态管理功能优化15vueresource异步请求和跨域16bug调试17node复习与Promise18全局组件与私有组件19动态组件20组件过渡效果和参数传递问题21调用组件内部定义的方法22ref引用和render渲染函数

Uncaught (in promise) DOMException: play() 音频播放报错,video播放报错的解决办法如下: 开发者解决 1.尽量避免手动创建dom元素, 2.添加预加载属性preload:auto, 3.去掉autuplay属性 , 4.添加静音属性muted 客户端解决在浏览器地址栏输入:chrome://flags/#autoplay...

vue播放m3u8浏览器报Uncaught (in promise) DOMException: play() failed because the user didn’t interact with 原因： Chrome 为了避免标签产生随机噪音。解决办法：在 video标签上加 muted <video muted id="singleVideo" class="video video-js vjs-default-skin" src=" " controls="controls"&

其他技术讨论专区

433

社区成员

791,271

社区内容

发帖

与我相关

我的任务

其他技术论坛（原bbs）

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章