开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

调用.play()会创建"Uncaught (in promise) DOMException:该元素没有受支持的源“。错误

调用.play()会创建"Uncaught (in promise) DOMException: 该元素没有受支持的源"错误是由于浏览器对于音视频播放的安全策略所导致的。这个错误通常发生在以下几种情况下：

跨域访问：浏览器限制了在不同域名下加载音视频资源，即使是相同域名下的不同子域名也会被视为跨域。解决方法是确保音视频资源与网页文件在同一个域名下，或者通过设置服务器的CORS（跨域资源共享）策略来允许跨域访问。
缺少支持的音视频格式：浏览器只支持特定的音视频格式，例如MP3、MP4、WebM等。如果使用了不受支持的格式，就会出现该错误。解决方法是将音视频转换为支持的格式，或者使用浏览器支持的媒体格式。
无效的音视频链接：如果提供的音视频链接无效或者无法访问，就会导致该错误。解决方法是确保音视频链接正确，并且可以在浏览器中正常访问。

针对这个错误，腾讯云提供了一系列的解决方案和产品：

腾讯云音视频处理（MPS）：提供了丰富的音视频处理功能，包括格式转换、水印添加、剪辑、拼接等。可以使用MPS将音视频转换为浏览器支持的格式，解决跨域访问和无效链接的问题。产品介绍链接：https://cloud.tencent.com/product/mps
腾讯云对象存储（COS）：提供了安全可靠的云存储服务，可以将音视频文件上传到COS，并通过COS的访问链接进行播放。产品介绍链接：https://cloud.tencent.com/product/cos
腾讯云内容分发网络（CDN）：通过将音视频资源缓存到CDN节点，可以加速音视频的加载速度，并解决跨域访问的问题。产品介绍链接：https://cloud.tencent.com/product/cdn

通过使用腾讯云的相关产品，可以有效解决调用.play()创建"Uncaught (in promise) DOMException: 该元素没有受支持的源"错误，并提供稳定可靠的音视频播放体验。

相关搜索:未捕获(in promise) DOMException:该元素在audio play()中没有受支持的源音频播放器返回未捕获(In promise)：(DOMException)该元素没有受支持的源在Vue中播放声音onClick事件返回Uncaught (在promise中) DOMException:无法加载，因为找不到受支持的源怎么卸载云服务怎么退出云服务怎么投资区块链怎么使用云服务怎么设置云服务怎么删掉云服务怎么取消云服务

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

vue+flvjs实现自定义控制条的流媒体播放器

使用全屏API时需要注意，如果全屏的元素是video，自定义的控制条会被全屏后的video元素覆盖住，更改z-index也不能解决。所以要放大video的父级元素。 this....Uncaught (in promise) DOMException:The play() request was interrupted by a new load request 报错信息表示：视频还没有准备好...这种情况会出现在，视频地址错误的情况下。常常是地址为空，或者格式错误。...Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()....调用play()的时候，音频文件还没有加载完成导致的问题。建议给video标签加上autoplay。不然老是出现这个问题。到底是什么原因导致的还不知道。同一页面中引入4个画面时，其他三个画面会报错。

5.1K3 1

EasyPlayer.js播放器首次加载报错Uncaught (in promise) DOMException

等，并且每个版本都带有二次开发接口，用户的自主调用简单易上手。...有的项目中使用EasyPlayer.js首次加载时会出现错误信息：Uncaught (in promise) DOMException: play() failed because the user didn...这个错误与谷歌浏览器机制有关，谷歌阻止播放器的自动播放，如果页面首次加载中视频带声音并且设置了自动播放，谷歌则会阻止播放器播放并抛出一个错误异常。...，EasyPlayerPro虽然支持了几乎所有的流媒体协议，但是在很多场景和需求下面（例如：SDK包大小，自定义协议，数据加密），EasyPlayerPro的定制成本比较高，灵活程度没有EasyPlayer-RTSP...因此如果还想了解TSINGSEE青犀视频开发的其他专用播放器，欢迎联系我们，目前EasyPlayer系列已经支持H265编码的视频播放，同时支持集成，欢迎了解。

4.3K1 0

网页视频autoplay兼容及解决方案

3.video元素设置了playinline属性 videoElement.play()满足下列条件可以自动播放： 1.视频的源是没有音轨的或video标签使用了muted属性手动静音 2.video...“未开启流量节省模式”的限制 Chrome in PC Chrome 66版本以前：完全支持自动播放 Chrome 66版本及以后：视频的源是没有音轨的或video元素使用了muted属性手动静音...或站点是一个PWA应用，并且用户把它安装到了桌面 Safari in PC Safari 11版本以前：完全支持自动播放 Safari 11版本以后：视频的源是没有音轨的或video...，在不同的机型中N的大小也不同，即延迟调用video.play()方法可能会失效。...检测自动播放，播放失败时回退到用户交互触发播放通过play API返回的Promise检测自动播放成功还是失败不使用autoplay属性，而是调用play API来尝试进行自动播放，高版本浏览器会返回一个

1271 0

移动网页广告引入mraid.js使用指南

在网上找mraid相关资料，相对比较少，大多都是API介绍，概念介绍等，没有一份详细的移动端网页广告使用教程，经过自己两天的摸索，完成了开发的移动端网页版的广告加入mraid功能。...，影响了用户看到的广告效果，即可能会降低点击率和转化率。.../mraid_cn/blob/master/mraid_cn.md 开始 1、在网页中首先引入mraid.js【直接引入即可，不需要在本地放mraid.js，页面在支持mraid的app中会自动注入】...//视频元素可以选择静音后再播放,提示用户打开声音 v.muted = true; v.play(); });...()方法的时候，有时候会出现报错： Uncaught (in promise) DOMException 有一篇文章写的比较好:推荐一下 4、mraid代码实现的流程：先判断mraid状态是否为loading

2.3K3 0

关于 JavaScript 错误处理的最完整指南(上半部)

创建，错误对象有三个属性： message:带有错误消息的字符串 name：错误的类型 stack：函数执行的堆栈跟踪例如，我们使用 TypeError 对象创建一个错误，对应的 message 是创建的传入的字符号...在我们的代码中，主要还是使用Error和TypeError这两种最常见的类型来创建自己的错误对象 ?。...Uncaught TypeError: button is null 除了这些内置错误外，在浏览器中还有： DOMException DOMError，现在已经废弃，不再使用了。...DOMException是与 Web API 相关的一系列错误。...当我们在浏览器中执行愚蠢的操作时，它们会被抛出，例如： document.body.appendChild(document.cloneNode(true)); 结果： Uncaught DOMException

1.6K3 0

JavaScript错误处理完全指南

要在 JavaScript 中创建一个新错误，我们需要调用适当的构造函数。...; 创建后，错误对象将显示三个属性： message：包含错误消息的字符串 name：错误的类型 stack：函数执行的堆栈跟踪例如，如果我们创建一个新的 TypeError 对象，带有适当的消息，该...HTML 元素时，也会发生 TypeError： Uncaught TypeError: button is null 除了这些传统的错误对象外，JavaScript 中很快还会有 AggregateError...除了这些内置错误外，在浏览器中我们还可以找到： DOMException DOMError，已弃用，如今不再使用 DOMException 是与 WebAPI 相关的一系列错误。...要了解有关该主题的更多信息，请参考“Node.js 中的错误处理”。

4.9K2 0

关于直播卖货系统平台在微信浏览器中音视频播放的问题

这就导致直播卖货系统H5页面在android和iOS微信中的部分表现差异，但由于X5内核是腾讯基于开源Webkit优化的浏览器渲染引擎，所以除了对video标签的挟持，和下载页跳转被腾讯应用宝挟持外，其他表现上还没有遇到特别折磨人的差别... 如果用 javascript 代码显式调用play方法，控制台会看到如下异常：Uncaught (in promise) DOMException。...手机上，X5浏览器会劫持Video标签用腾讯播放器弹出全屏播放，处于最上层，覆盖DOM元素，更可恶的是播放完毕时，会出现很多腾讯的广告视频。...prerender : 页面内容正在被预渲染且对用户是不可见的(被document.hidden当做隐藏). 文档可能初始状态为prerender，但绝不会从其它值转为该值。...注释：浏览器支持是可选的。 unloaded : 页面正在从内存中卸载。注释：浏览器支持是可选的。

1.2K2 0

如何取消 JavaScript 中的异步任务

中止信号（Abort signal）在将 Promise 引入 ES2015 并出现了一些支持新异步解决方案的 Web API 之后不久，需要取消异步任务的需求就出现了(https://github.com...这种解决方案的明显缺点是 Node.js 中不提供 AbortController，从而在该环境没有任何优雅或官方的方式来取消异步任务。...该属性是 AbortSignal DOM 接口的实例，该实例具有 aborted 属性，其中包含有关用户是否已调用 abortController.abort() 方法的信息。...因此，你可以在代码不同部分中重用它（但是，创建一个错误工厂会更优雅，尽管听起来很愚蠢）。另外出现了一个保护子句，检查 abortSignal.aborted（2）的值。...如果等于 true，那么 calculate() 函数将会拒绝带有适当错误的 promise，而无需执行任何其他操作。这就是创建完全可中止的异步函数的方式。

3.3K1 0

Node.js v15.x 新特性 — 控制器对象 AbortController

无需引入在所有模块中均可使用，该 API 的实现是基于浏览器中的 Web API AbortController。...之后在任何地方调用 ac.abort() 中止 Promise。...通过 reject 一个带有 "AbortError" DOMException 这个类的 Promise 来表示操作已中止。...DOMException 这个类，我们无法这样做 new DOMException('task handler failed', 'AbortError') 所以我在刚开始先创建了一个 AbortError...Node.js 中已经有一些异步 API 支持传递 signal，但是它的 DOMException 错误也是在内部通过封装来实现的： // https://github.com/nodejs/node

1.4K4 0

H5利用JS调用电脑摄像头实现拍照效果

注意：该方法只适用于本地和 https 请求，http 会提示没有权限，报 PermissionDeniedError 错误。...，会返回错误信息 // 保持接口一致 if (!...如果没有，则会导致调用 getUserMedia() 错误。出于隐私原因无法访问有关用户摄像头和麦克风的信息，不过应用程序可以使用其他约束来请求所需的摄像头和麦克风功能。...例外通过将 DOMException 错误对象传递给 promise 的失败处理程序来拒绝返回的 promise 。...因为即使用户尚未授予使用底层设备的权限，也可能发生此错误，因此可能会将其用作指纹表面。 SecurityError Document在getUserMedia()被调用的对象上禁用用户媒体支持。

9.5K4 1

EasyWasmPlayer播放视频报错Uncaught (in promise）如何解决？

作为我们的视频流媒体播放器，EasyPlayer 系列项目都支持集成以及二次开发，也可以通过下载试用获得真实的测试效果。...其中新的 H.265 播放器分支 EasyWasmPlayer 播放器是网页播放的主流播放器。...当我们在项目中采用 EasyWasmPlayer 播放视频时，控制台会一直出现报错 Uncaught (in promise）DOMException。本文我们分析下该报错是什么问题导致的。...image.png 其实这个问题是浏览器阻止自动播放导致的错误，用户设置了自动播放，所以在首屏加载时会出现这个情况，处理这个情况可以将音频禁止即可。...或者避免首屏一上来就加载播放器，但是该项目中显然不是这个问题，而是打开播放页面，选中设备开始播放，才开始加载播放器，修改后即能正常播放： image.png 播放器 EasyPlayer 目前正在多个平台上得到了有效使用，并且支持集成

1K2 0

vue3 项目生产环境切换路由卡死问题【vue bug】

Uncaught (in promise) DOMException: Failed to read the 'value' property from 'SVGLength': Could not resolve...首先我调用了router.push 方法，然后vue router 调用了 vue ，最后在traverse函数报错。 ? 是在解决不了了，感觉像是vue bug 决定提了一个issue。...最后原因由于我 watch(useRoute()) 产生了问题，错误代码： watch(useRoute(), current => { }) 我watch 了整个route 对象，route 对象太大了...，如果组件内部使用了 window 对象在 deep watch 的时候就会出现你遇到的错了正确写法： watch(()=>useRoute().xxx,xxx) watch 想要监听的属性就行，...总结： ---- 1、感觉dev环境没有问题，生产环境出错，这种问题vue-router是不是也要背锅 2、自己写代码不仔细，有冗余部分，尽量减少冗余，减少出错。 3、定位问题能力有待加强。

3K2 0

JavaScript 错误处理大全【建议收藏】

JavaScript 中的错误是一个对象，随后被抛出，用以终止程序。要在 JavaScript 中创建新错误，我们调用相应的构造函数。...in async function 当在页面中选择不存在的 HTML 元素时，会发生 TypeError： Uncaught TypeError: button is null 除了这些“传统的”...这意味着我们可以侦听页面中任何 HTML 元素上的事件。Node.js 将在未来版本中支持 EventTarget。 DOM 事件的错误处理机制遵循与异步 Web API 的相同方案。...Promise.allSettled 中的错误处理 Promise.allSettled 是对该语言的 ECMAScript 2020 补充。...Node.js 中的同步错误处理与到目前为止所看到的并没有太大差异。

6.3K5 0

JS 调取摄像头

JS 调取摄像头截止目前（2016-06-23）为止，js 调取摄像头实现视频聊天，部分浏览器还是不怎么支持的。示例1 ：代码附上： <!...|| navigator.webkitGetUserMedia || navigator.mozGetUserMedia); // 有些浏览器只是不实现它-返回一个不被拒绝的承诺与一个错误保持一致的接口...browser-getUserMedia是不是在这个浏览器实现')); } // 否则，调用包在一个旧navigator.getusermedia承诺...http://stackoverflow.com/questions/34290337/serviceworker-registration-failed-domexception-only-secure-origins-are-allowed...： Mobile 浏览器支持： ----

2.6K3 0

【思考】$nextTick 与 setTimeout 的一点对比！

并不是说如果你去掉nextTick，就不会得到同样的结果。然而，你应该明白，Vue会根据数据中的内容对DOM进行修改。...到目前为止，我们已经研究了nextTick在回调队列中插入回调函数并在适当的时候执行该函数。这个你可能会感兴趣，nextTick中的回调是作为事件循环中的一个微任务使用的。...它发生得很快，因此如果没有看到此行为，需要刷新浏览器。在上面的代码片段中，Vue将DOM更新为3，并提供浏览器控制。...nextTick的实现在不支持Promise和MutationObserver的浏览器（IE 6-10和Opera Mini浏览器）上，使用setTimeout作为后备方法，对于不支持Promise和MutationObserver...何时使用 nexttick 当你想使用setTimeout时当你想确定DOM能反映你的数据时在尝试执行异步操作时，遇到Uncaught (in promise) DOMException等错误。

1.7K3 0

如何优雅处理前端异常？

： Uncaught SyntaxError: Invalid or unexpected token 什么，竟然没有捕获到语法错误？...window.addEventListener 当一项资源（如图片或脚本）加载失败，加载资源的元素会触发一个 Event 接口的 error 事件，并执行该元素上的onerror() 处理函数。...没有写 catch 的 Promise 中抛出的错误无法被 onerror 或 try-catch 捕获到，所以我们务必要在 Promise 中不要忘记写 catch 处理抛出的异常。...解决方案：为了防止有漏掉的 Promise 异常，建议在全局增加一个对 unhandledrejection 的监听，用来全局监听Uncaught Promise Error。...错误上报通过 Ajax 发送数据因为 Ajax 请求本身也有可能会发生异常，而且有可能会引发跨域问题，一般情况下更推荐使用动态创建 img 标签的形式进行上报。

1.7K2 0

如何优雅处理前端异常？

： Uncaught SyntaxError: Invalid or unexpected token 什么，竟然没有捕获到语法错误？...五、window.addEventListener 当一项资源（如图片或脚本）加载失败，加载资源的元素会触发一个 Event 接口的 error 事件，并执行该元素上的onerror() 处理函数。...没有写 catch 的 Promise 中抛出的错误无法被 onerror 或 try-catch 捕获到，所以我们务必要在 Promise 中不要忘记写 catch 处理抛出的异常。...解决方案：为了防止有漏掉的 Promise 异常，建议在全局增加一个对 unhandledrejection 的监听，用来全局监听Uncaught Promise Error。...十二、错误上报 1. 通过 Ajax 发送数据因为 Ajax 请求本身也有可能会发生异常，而且有可能会引发跨域问题，一般情况下更推荐使用动态创建 img 标签的形式进行上报。 2.

2.1K3 0

前端面试（2）javascript

ES6 的继承有所不同，实质上是先创建父类的实例对象 this，然后再用子类的构造函数修改 this。因为子类没有自己的 this 对象，所以必须先调用父类的 super()方法，否则新建实例报错。...实现步骤: Step1: 创建 callback 方法 Step2: 插入 script 标签 Step3: 后台接受到请求，解析前端传过去的 callback 方法，返回该方法的调用，并且数据作为参数传入该方法...该协议不实行同源政策，只要服务器端支持，无需任何配置就支持跨域。...当 web 缓存发现请求的资源已经被存储，它会拦截请求，返回该资源的拷贝，而不会去源服务器重新下载。这样带来的好处有：缓解服务器端压力，提升性能(获取资源的耗时更短了)。...它一共运行了两次，第一次的值是 999，第二次的值是 1000。这证明了，函数 f1 中的局部变量 n 一直保存在内存中，并没有在 f1 调用后被自动清除。为什么会这样呢？

1.2K2 0

前端开发，如何优雅处理前端异常？

： Uncaught SyntaxError: Invalid or unexpected token 什么，竟然没有捕获到语法错误？...五、window.addEventListener 当一项资源（如图片或脚本）加载失败，加载资源的元素会触发一个 Event 接口的 error 事件，并执行该元素上的onerror() 处理函数。...没有写 catch 的 Promise 中抛出的错误无法被 onerror 或 try-catch 捕获到，所以我们务必要在 Promise 中不要忘记写 catch 处理抛出的异常。...解决方案：为了防止有漏掉的 Promise 异常，建议在全局增加一个对 unhandledrejection 的监听，用来全局监听Uncaught Promise Error。...十二、错误上报 1.通过 Ajax 发送数据因为 Ajax 请求本身也有可能会发生异常，而且有可能会引发跨域问题，一般情况下更推荐使用动态创建 img 标签的形式进行上报。

9551 0

如何优雅处理前端的异常？

补充一点：window.onerror 函数只有在返回 true 的时候，异常才不会向上抛出，否则即使是知道异常的发生控制台还是会显示 Uncaught Error: xxxxx 控制台就不会再有这样的错误了...window.addEventListener 当一项资源（如图片或脚本）加载失败，加载资源的元素会触发一个 Event 接口的 error 事件，并执行该元素上的 onerror() 处理函数。...没有写 catch 的 Promise 中抛出的错误无法被 onerror 或 try-catch 捕获到，所以我们务必要在 Promise 中不要忘记写 catch 处理抛出的异常。...解决方案：为了防止有漏掉的 Promise 异常，建议在全局增加一个对 unhandledrejection 的监听，用来全局监听Uncaught Promise Error。...八、错误上报 1. 通过 Ajax 发送数据: 因为 Ajax 请求本身也有可能会发生异常，而且有可能会引发跨域问题，一般情况下更推荐使用动态创建 img 标签的形式进行上报。

1.8K5 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭