Uncaught Error: Hydration failed because the server rendered HTML didn‘t match the client. As a resu

邓庶人

于 2025-04-07 13:54:53 发布

阅读量276

点赞数 3

文章标签： js

本文链接：https://blog.csdn.net/m0_72133175/article/details/147042462

版权

我这里自己除了global.css，多写了个other.css，估计渲染冲突了，所以我删除自定义的css文件，然后通过tailwind.config.ts统一控制即可。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

邓庶人

关注关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

react自动播放音频错误修复play() failed because the user didn‘t interact with the document first.

Youyzq的博客

01-17

8874

App.js:76 Uncaught (in promise) NotAllowedError: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

echarts.js:1136 Uncaught Error: Initialize failed: invalid dom.

最新发布

kiramario的博客

03-16

328

【代码】录一次nextjs中内部子layout误加html元素导致页面编译报错：Hydration failed because the server rendered HTML didn't match。

NextJS的水合冲突A tree hydrated but some attributes of the server rendered HTML didn‘t match the client..

无限进步

12-16

604

A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up.

Hydration failed because the initial UI does not match what was rendered on the server.问题原因之一

Yukinoshita_kino的博客

06-23

4499

Hydration failed because the initial UI does not match what was rendered on the server.由于标签嵌套错误引起报错

Next.js Error: Hydration failed because the initial UI does not match what was render

ragga-time

04-18

583

Error: Hydration failed because the initial UI does not match what was rendered on the server.

JS提示：Uncaught SyntaxError:Unexpected token ) 错误的解决方法

10-21

主要介绍了JS提示：Uncaught SyntaxError:Unexpected token ) 错误的解决方法,结合实例形式分析了javascript提示此类异常的常见原因与相关解决方法,需要的朋友可以参考下

小程序报错 WAService.js:3 Uncaught Error: module ＂src/utils/utils.js＂ is not defined

03-29

编译程序时候老是报module "src/utils/utils.js" is not defined的错，狂问度娘也没结果后来静下来想才尝试弄正确：我本来的页面地址是："src/main/welcome/welcome" 在这个页面的基础上要加载utils.js，所以按照...

Rendered more hooks than during the previous render(解决方案).md

08-29

Rendered more hooks than during the previous render(解决方案).md

浏览器自动播放音频时的错误拦截（Uncaught (in promise) NotAllowedError: play() ...... https://goo.gl/xX8pDD）

qq_45599738的博客

11-19

3177

对浏览器自动播放音频拦截的处理 Uncaught (in promise) NotAllowedError: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

报错 play() failed because the user didn‘t interact with the document first

qq_45976132的博客

05-18

3万+

Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first. https://goo.gl/xX8pDD 报这个错是因为在最新版的Chrome浏览器（以及所有以Chromium为内核的浏览器）中，已不再允许自动播放音频和视频。就算你为video或audio标签设置了autoplay属性也一样不能自动播放在我项目中的原因是因为我把播放声音的按钮设置为t

play() failed because the user didn‘t interact with the document优化媒体不能自动播放

wzp20092009的博客

09-14

2万+

谷歌浏览器 video 元素设置 autoplay，我们原意是希望页面加载时自动播放，但实际上并没有自动播放，在控制台报错如下： Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first. 这里的意思是，是因为用户没有先和网页交互所以播放失败。

play() failed because the user didn't interact with the document first

wed2100304的专栏

11-18

3万+

vue使用js调用音频文件报错，错误信息如下： play() failed because the user didn't interact with the document first 翻译：play方法调用失败，因为用户没有先操作文档【用户没有先去跟网页做交互再执行音频播放】用户再跟网页有了交互后，该报错不会再出现如果必须再网页加载完就播放音频，详情请看 ...

期待已久的 React 19 正式发布！

程序员成长指北

12-08

510

点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群原文地址：https://react.dev/blog/2024/12/05/react-19 整理：公众号：若川视野React 19 现在已经稳定了！自 4 月份本文最初与 React 19 RC 分享以来，又有了一些补充：悬挂树的预热：参见悬吊的改进。React DOM 静态 API：参见新的 React DOM 静态 AP...

Uncaught (in promise) DOMException: play() failed because the user didn‘t interact with the document

weixin_55333190的博客

01-11

9789

Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document 未捕获(承诺中)DOMException: play()失败，因为用户没有首先与文档交互。需要讲play()定义在一个按钮身上 <template> <div class="hello"> <div id="wrapper" style="width:500px.

在浏览器加载完毕后，自动播放视频：出现play() failed because the user didn't interact with the document first.错误

weixin_42398560的博客

09-15

1万+

解决方法：给video标签加入<video muted></video> 静音即可。 Chrome 66为了避免标签产生随机噪音。

Uncaught (in promise) NotAllowedError: play() failed because the user didn't interact with the document first.ze

02-20

### 解决 `play() failed because the user didn't interact with the document first` 错误当尝试调用媒体元素的 `play()` 方法时，如果用户尚未与文档交互，则会抛出 `NotAllowedError` 异常。此行为源于现代浏览器为了改善用户体验而实施的 autoplay 政策[^2]。 #### 用户交互触发播放一种解决方案是在用户的首次互动之后再启动播放操作。这可以通过监听诸如点击、按键等事件来实现： ```javascript document.querySelector('video').addEventListener('click', function () { this.play().catch(function (error) { console.error("Playback error:", error); }); }); ``` 上述代码片段展示了如何通过绑定点击事件到 `<video>` 元素上来响应用户动作并安全地执行播放命令[^1]。 #### 使用静默模式加载资源另一种方法是先将音频/视频设置为静音状态 (`muted`) 并允许其自动播放属性 (`autoplay`). 浏览器通常更宽松对待无声内容的自动化处理: ```html <video muted autoplay>  </video> ``` 这种方式下即使没有显式的用户输入也可以顺利开始回放过程, 同时保持声音关闭直到获得许可为止. 对于某些场景来说，在页面载入初期就完成数据预取可能是必要的；此时可考虑采用这种技术手段作为变通方案之一.