chrome运行JS报错:Uncaught（in promise）DOMException:play（）

最新推荐文章于 2025-06-05 16:38:02 发布
原创 最新推荐文章于 2025-06-05 16:38:02 发布 · 1.2w 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#chrome

首次在Chrome页面加载播放功能时会出现错误，解决办法是修改Chrome的autoplay - policy（播放政策）。在Chrome中输入chrome://flags/#autoplay - policy，将Default设置为No user gesture is required，然后重启Chrome。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

首次在chrome页面中加载播放功能时，会出现下面错误：

Uncaught（in promise）DOMException:play（）

解决方法，将chrome 的 autoplay-policy（播放政策）修改为 No user gesture is required，方法如下：

  1. 在chrome中输入 chrome://flags/#autoplay-policy
  2. 将Default设置为No user gesture is required
  3. 重启chrome，Relaunch Chrome
    设置auto play步骤
    重启chrome
uniapp - 使用 ＜video＞ 播放视频黑屏，浏览器控制台报错： DOMException: The element has on supported sources.（详细完美解决方案）
高级前端工程师
04-13 1万+
uniapp video 视频播放黑屏，uniapp 报错DOMException: The element has on supported sources.，uniapp如何解决DOMException: The element has on supported sources.，uniapp使用video标签无法播放视频出现黑屏问题处理，uniapp解决video视频黑屏显示0秒，并且浏览器报错DOMException: The element has on supported sources.，un
浏览器自动播放音频时的错误拦截（Uncaught (in promise) NotAllowedError: play() ...... https://goo.gl/xX8pDD）
qq_45599738的博客
11-19 4140
对浏览器自动播放音频拦截的处理 Uncaught (in promise) NotAllowedError: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD
JS报错:Uncaught（in promise）DOMException:play（）
S筱潇S四维Smile
08-19 7225
在Chrome中页面首次加载的时候有事会出现以上报错： Uncaught（in promise）DOMException：play（） 处理方法：设置浏览器参数 打开谷歌地址输入chrome://flags/#autoplay-policy 修改为 No user gesture is required let audio = document.querySelector("#a...
H5网页视频自动播放时提示play() failed异常解决
最新发布
searchzlj的博客
06-05 905
audio自动播放异常Uncaught (in promise) NotAllowedError: play() failed because the user didn't interact with the document first
Uncaught (in promise) DOMException: play() failed because the user didn‘t interact with the document
任立伟的博客
09-22 1326
大多数浏览器为了用户体验会把这个自动播放音频屏蔽掉 解决方案，设置自己的浏览器，（对我没什么用） js中使用iframe的方式可以办到，亲测有效 aplayAudio: function() { let iframe = document.createElement('iframe'); iframe.src="src/assets/alarm.wav"; document.body.appendChild(iframe); }, ...
html5 autoplay不起作用 Uncaught (in promise) DOMException: play() failed because the user didn't interac
热门推荐
red_heel的博客
05-30 6万+
Chrome的autoplay政策在2018年4月做了更改。新的行为：浏览器为了提高用户体验，减少数据消耗，现在都在遵循autoplay政策，Chrome的autoplay 政策非常简单1. muted autoplay始终被允许2. 音乐的autoplay 只有在下面集中情况下起作用：    1. 有用户行为发生像（click,tap,etc）.    2. 对于桌面程序，用户已经提前播放了音频...
关于 Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause() 错误...
weixin_30507481的博客
12-02 5826
最近在做项目的时候发现一个如题的控制台报错。 一看右侧的报错文件是undefined 这下苦恼了，定位不到问题所在。 今天解决了这个问题，就来分享一下。 问题的关键所在是在执行了play()方法以后立即执行pause()方法。反之亦然 以下贴出代码 HTML: <button id="btn1">test</button> JS: v...
html5 自动播放chrome浏览器报错Uncaught (in promise) DOMException:
hangGe0111的博客
12-29 3万+
Chrome的自动播放的政策在2018年4月做了更改，这点在开源中国的这篇文章中也有说到。 新的行为：浏览器为了提高用户体验，减少数据消耗，现在都在遵循autoplay政策，Chrome的autoplay 政策非常简单 1. muted autoplay始终被允许 2. 音乐的autoplay 只有在下面集中情况下起作用：     2.1有用户行为发生像（click,tap,etc）； ...
uniapp在电脑浏览器播放hls加密视频报错 Uncaught (in promise) DOMException: The element has no supported sources. ，还有uniapp播放hls视频方法代码例子？
07-15
如果在电脑浏览器中播放 HLS 加密视频时出现 "Uncaught (in promise) DOMException: The element has no supported sources." 错误，这可能是由于浏览器不支持对加密的 HLS 视频进行解密。 UniApp 默认使用的是 `...
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD
09-16
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD 这个错误是由于在最新版的Chrome浏览器（以及所有以Chromium为内核的浏览器...
H5视频、音频不能自动播放,Uncaught (in promise) DOMException: play() failed because the user didn't...
weixin_30772105的博客
09-13 4207
错误原因：Chrome的autoplay政策在2018年4月做了更改。 解决办法： 第一步，在chrome浏览器中输入：chrome://flags/#autoplay-policy 第二步，在Autoplay policy中将Default改为No user gesture is required 第三步，点击下方的“RELAUNCH NOW”,就大功告成了！ ...
Uncaught(in promise)DOMException:play()
xingxingxingge的博客
03-18 3008
在Chrome中页面首次加载的时候有事会出现以上报错： Uncaught (in promise) DOMException: play() failed because the user didn't in 在浏览器输入地址: chrome://flags/#autoplay-policy 修改Autoplay policy 为No user gesture is requir...
解决谷歌浏览器js报错：Uncaught (in promise) DOMException
SummerGao
11-24 5439
在chrome的地址栏中输入：...
html5 autoplay不起作用 Uncaught (in promise) DOMException: play() failed because the user didn't interac...
SummerGao
03-04 316
Chrome的autopl...
vue播放m3u8浏览器报Uncaught (in promise) DOMException: play() failed because the user didn‘t interact with
zxh7770的博客
12-06 2161
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"&
【H5】H5移动端音频自动播放问题深度解析与解决方案（Uncaught (in promise) DOMException: play() can only be initiated by a us）
九日的博客
01-21 1809
这个错误提示我们：音频播放必须由用户手势触发。这是现代浏览器出于用户体验和安全考虑而设置的限制。
Uncaught (in promise) DOMException: play() failed because the user didn't interact
qq_36742720的博客
01-16 1万+
Chrome的autoplay政策在2018年4月做了更改。 新的行为：浏览器为了提高用户体验，减少数据消耗，现在都在遵循autoplay政策，Chrome的autoplay 政策非常简单 muted autoplay始终被允许 音乐的autoplay 只有在下面集中情况下起作用： 有用户行为发生像（click,tap,etc）. 对于桌面程序，用户已经提前播放了音频 对于移动端用户将音...
vue部署报错：Uncaught (in promise) TypeError: u is undefined
02-06
### 解决 Vue 项目部署时遇到的 `TypeError: u is undefined` 错误 在处理 Vue 项目部署过程中出现的 `Uncaught (in promise) TypeError: u is undefined` 错误时，可以从多个角度来排查和解决问题。 #### 检查未定义对象访问 该错误通常表示尝试读取或操作一个尚未初始化的对象属性。这可能是由于异步加载的数据未能及时返回或是某些依赖项缺失所引起的[^1]。为了防止此类情况发生，在访问可能不存在的对象之前应先做存在性验证： ```javascript if (u && typeof u === 'object') { // 安全地访问 u 的属性 } ``` #### 确认按需引入组件 确保按照实际需求逐步导入所需的 UI 组件而不是整个库文件，这样不仅可以减少打包体积还能降低因意外覆盖全局变量而导致的问题风险[^2]。例如： ```javascript // 只引入必要的 Element-UI 组件而非全部 import { Button, Input } from 'element-ui'; Vue.use(Button); Vue.use(Input); ``` #### 类型安全编程实践 采用 TypeScript 或者严格模式下的 JavaScript 开发有助于提前发现潜在的风险点。通过静态分析工具可以在编译阶段捕捉到不匹配的数据结构从而避免运行时期间抛出异常[^3]。比如使用接口定义用户模型： ```typescript interface User { name: string; sex?: string; // 使用可选参数标记不确定字段 age?: number; } const validUser: User = { name: "ZhangSan", }; console.log(validUser.name); // 正确输出 ZhangSan ``` #### 配置环境变量插件 对于生产环境下构建过程中的特定设置，合理利用 Webpack 提供的各种插件能够有效规避一些常见的陷阱。特别是当涉及到区分不同工作流（如开发/测试/发布版）之间的差异配置时更为重要[^4]。具体做法是在 Webpack 生产配置中加入 DefinePlugin 来指定当前的工作状态： ```javascript var webpack = require('webpack'); module.exports = { plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }) ] }; ``` 以上措施综合运用可以帮助定位并修复 `TypeError: u is undefined` 这样的问题根源所在，并提高应用程序的整体健壮性和稳定性。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值