调用.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: 该元素没有受支持的源"错误，并提供稳定可靠的音视频播放体验。
相关·内容
当动态更改视频时，我在服务器控制台下得到以下错误
(index):71 Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.
发生更改时，我将使用以下代码
function playlocalVID()
{
var player = document.getElementById("video");
var currentVID = document.getElementById('currentVID&#
浏览 12提问于2016-10-25得票数 8
回答已采纳
我打算在我的js代码中播放来自外部url的音频文件，但我在google chrome和firefox中不断收到这个错误：Uncaught (in promise) DOMException: The element has no supported sources.和Uncaught (in promise) DOMException: The media resource indicated by the src attribute or assigned media provider object was not suitable.。 下面是我的代码： const sound = new
浏览 1658提问于2021-09-08得票数 0
我正在用Javascript开发一个web应用程序，可以连续播放几个mp4视频。一切都很好，但在使用Chrome的Android上。前三个视频播放得很好，但是从第四个开始，当我调用video.play()方法时，我在控制台中得到了这个错误："Uncaught (in promise) DOMException: Failed to load，因为没有找到受支持的源文件。“
我确信所有的视频源(blob)都是正确的，因为我可以在另一个选项卡中加载它们。
我像这样生成我的视频元素：
generate_video_element = function(src) {
var v = doc
浏览 0提问于2018-01-17得票数 1
我想播放音频作为警告，但我得到了一个错误，如"Uncaught (in promise) DOMException: play() failed，因为用户没有首先与文档交互。
HTML代码：
<audio id="alarm" src="alarm.mp3"></audio>
JavaScript代码：
function alarm() {
var value = document.getElementById("rvoltage").innerHTML;
if (value > 230) {
浏览 4提问于2018-10-24得票数 7
我想在页面加载后播放声音。下面是我的javascript代码： var playAudio = $("#sound")[0];
playAudio.play(); 和html代码： <audio id="sound">
<source src="../music/hide.ogg" type="audio/ogg">
<source src="../music/hide.mp3" type="audio/mp3">
</au
浏览 67提问于2020-11-20得票数 0
回答已采纳
如果我尝试播放一个不存在的音频文件(例如，该文件尚未下载)，如下所示：
audio_object = new Audio("Non_Existing_Audio_File.mp3");
audio_object.play();
我得到：
Uncaught (in promise) DOMException: The media resource indicated by the src attribute or assigned media provider object was not suitable.
那很好，但是我怎么才能发现那个错误呢？如果我尝试/捕捉，就会发生这
浏览 6提问于2022-02-25得票数 0
1回答
我收到一个名为Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.的错误，有人知道如何修复这个错误吗？
const audioCls = new Audio("/assets/audio/a4.mp3");
setInterval(() => {
audioCls.play();
}, 1000);
浏览 2提问于2021-11-14得票数 1
回答已采纳
如何处理“Uncaught (in promise) DOMException: play()失败，因为用户没有首先与文档交互。”在带有Chrome64和HTML5视频标签的台式机上。
浏览 20提问于2018-10-31得票数 0
1回答
React JS音频无法播放
、、、、
我有一个名为"app.js“的react文件，其中包含以下代码：
import React from 'react';
const App = () => {
const play = (url) => {
new Audio(url).play();
}
return <>
<input type="button" value="play" onClick={()=> play("./au.mp3")} />
浏览 2提问于2020-10-20得票数 0
我正在为自己编写一个扩展，它可以根据读取DOM中的内容来播放声音。 有时声音播放正常，有时声音播放失败 uncaught (in promise) DOMException 没有进一步的信息。 据我所知，这是当你试图插入自动播放音频到网页而没有默认设置为静音时发生的问题。如果是这样的话，为什么我的扩展有时可以工作，但有时不能呢？ 我可以确认DOM被正确解析，错误发生在以下对play的调用中 let my_audio = new Audio(chrome.runtime.getURL("media/beep.wav"));
my_audio.play(); 媒体文件已在mani
浏览 13提问于2019-06-17得票数 0
回答已采纳
我的代码今天停止工作了(它以前工作过)。
下面是我的代码：
playMe = new Audio(link);
playMe.play();
下面是我在控制台中得到的错误：
Uncaught (in promise) DOMException: Failed to load because no supported source was found.
这实际上是audio.play();不起作用，因为如果我只保留第一行，我不会得到一个错误(但显然是dos不播放)。
我使用的是chrome 52.0.2743.82 m(64位)
谢谢。
浏览 1提问于2016-07-28得票数 3
1回答
因此，例如，当我们尝试myVideoElement.play()时，我们在控制台中得到了这个错误：
Uncaught (in promise) DOMException: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
例如，在JavaScript中是否可以检测或测试我们的上下文，以防止调用play()？我不希望控制台中显示警告或错误消息。
浏览 6提问于2020-08-04得票数 1
当我尝试在本地运行时，使用在本地主机上使用端口5000进行绑定和解压缩构建时，对service-worker.js的请求失败：
An SSL certificate error occurred when fetching the script.
https://localhost:5000/service-worker.js Failed to load resource: net::ERR_INSECURE_RESPONSE
(index):1 Uncaught (in promise) DOMException: Failed to register a ServiceWorke
浏览 12提问于2017-01-14得票数 1
回答已采纳
我收到这个错误，我的声音一开始不工作，然后开始工作，即使我什么也没做，现在它又停止工作了
一段代码: var audio = new Audio("sounds/“+ randomChosenColor + ".mp3")；audio.play()；
这是我收到的错误消息: Uncaught (in promise) DOMException: play()失败，因为用户没有首先与文档交互。
浏览 0提问于2020-09-17得票数 0
我看不到weibo.com网站上的视频。
调试会看到这样的错误: Uncaught (in promise) DOMException: play()失败，因为用户没有首先与文档交互。
例如，查看此链接：
可能的问题是什么？非常感谢，马泰奥
浏览 0提问于2018-08-28得票数 0
1回答
当我试图在用户与页面交互之前运行Audio.play()时，它会抛出一个错误：
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first
如何才能捕捉到异常，这样才不会丢弃控制台日志？我想尝试以编程方式加载音频并清除错误，但是默认的JavaScript try/catch没有成功应用。
浏览 2提问于2020-10-19得票数 0
回答已采纳
var buttonColours = ["red", "blue", "green", "yellow"];
var gamePattern = [];
function nextSequence() {
var randomNumber = Math.floor(Math.random() * 4);
var randomChosenColour = buttonColours[randomNumber];
gamePattern.push(randomChosenColour);
$("#&#
浏览 0提问于2020-11-21得票数 0
2回答
peer.on('stream', function (stream) {
console.log('peer on stream called');
console.log(stream);
this.video = document.getElementById("peerVideo");
this.video.srcObject = stream;
this.video.play();
浏览 6提问于2020-05-15得票数 1
在Javascript中，我收到了一个DOMException错误，只有在Android上，当我从一个函数中使用play()启动一个音频剪辑时，这个函数会被调用。
我用下面的代码设置了事件：
instructionsDiv.addEventListener("touchstart", touchStart, false);
我用下面的代码调用函数中的音频片段：
instructionsDiv.removeEventListener("touchstart", touchStart);
audio = new Audio(sndSources.welcome);
浏览 17提问于2017-06-12得票数 2
我有一个名为video.mp4的视频，我想把它流到HTML中的一个视频标记中，我尝试了太多其他问题的答案，但没有一个有效。
var URL = this.window.URL || this.window.webkitURL;
var file = new Blob(["./video.mp4"], {"type": "video\/mp4"});
var value = URL.createObjectURL(file);
console.log(value);
video.src = value;
当我尝试上面的代码时，它打印了一个blob
浏览 19提问于2022-09-25得票数 2
1回答
在react-js中播放声音
、、、、
我试着在react-js上播放声音，但是我不能启动它。在获取InitialState之前，我在我的reactClass中初始化了我的声音变量：
var App = React.createClass({
audio: new Audio('files/audio.mp3'),
getInitialState: function () {
return {
playSound: false,
........
}
}
下面是我提供的启动和停止功能：
playSound: function() {
if(!this.state.playSound){
th
浏览 0提问于2016-09-30得票数 2
回答已采纳
我试图使用将图像复制到剪贴板使用JavaScript。我尝试过，但得到了错误：
Uncaught (in promise) DOMException: Document is not focused.
有一个显示：
try {
const imgURL = '/images/generic/file.png';
const data = await fetch(imgURL);
const blob = await data.blob();
await navigator.clipboard.write([
new ClipboardItem({
浏览 4提问于2020-02-25得票数 1
回答已采纳
1回答
我制作了一个可以播放音频的自定义播放器。完成文件后，我不能再播放它。我得到了错误：Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().，但我不确定错误是不是。 const usePlayer = (src: string) => {
const [audio] = useState(new Audio(src));
const [playing, setPlaying] = useState(false);
useEffect((
浏览 30提问于2020-09-18得票数 0
回答已采纳
我试图弄清楚为什么下面的代码在加载时会在控制台中显示以下两个错误： Uncaught Error: The error you provided does not contain a stack trace.
Uncaught (in promise) DOMException
playSound = () => {
let audioSound0 = new Audio(this.state.data[this.state.index].answerAudio0);
let audioSound1 = new Audio(this.state.data[this.s
浏览 27提问于2019-03-04得票数 0
我正在制作一个网站，我想当我的页面刷新时加载一个MP3文件，但不知何故它不能播放。 <body>
<audio id="kofi" autoplay="autoplay">
<source src="kofi.mp3" type="audio/mp3">
</audio>
<script type="text/javascript">
window.onload = function(){
document.getEl
浏览 16提问于2019-01-11得票数 1
我尝试在相位器中自动播放视频。但是当视频开始时，会出现一条消息"Uncaught (in promise) DOMException: play() failed，因为用户没有首先与文档交互。“在控制台中。
是的，我读了，知道静音视频可以自动播放，但我想自动播放非静音视频。如何在phaser中自动播放未静音的视频？
浏览 2提问于2018-10-30得票数 0
我正在创建一个电子应用程序，并想播放本地音频文件(从计算机上，而不是我的项目目录)，而不使用输入类型的文件。
我尝试过创建一个新的音频实例并为其提供mp3文件的绝对路径的传统方法
在createAudio()内部
const player = new Audio('/Absolute/path/to/music.mp3');
player.play();
我希望它能播放音频文件，但由于某种原因，它抛出了"Uncaught (in promise) DOMException“。
浏览 10提问于2019-08-16得票数 3
回答已采纳
我有一个HTML5视频标签，用户可以通过输入类型文件组件添加视频。
我的问题是，点击删除链接，是否有可能删除视频 ?？
我试过
$(document).on("click", ".removepic", function(event)
{
$("#somevideo").val('');
var player = document.getElementById("video");
var currentVID = document.getElementById(
浏览 5提问于2016-10-20得票数 3
回答已采纳
我做了一个网站，如果用户点击，它应该播放视频。并且点击同样的按钮应该会暂停，
每当我试图暂停的时候，它就会显示出来
Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().
这是我的
有人能帮帮我吗？
我试过了
setTimeout(function () {
var item = $(".myVideosClick")[0];
if (!item.paused) {
item.pause();
}
}, 100
浏览 0提问于2017-02-10得票数 0
我对Javascript和Jquery比较陌生。我正在尝试做的是创建一个基本的网页与2个按钮，将发出声音，无论何时你点击他们。 上面的函数用于选择名为"green.mp3“的音频文件，并在单击绿色按钮时播放该文件。 function sound(color){
var audio = new Audio("sounds/" + color + ".mp3");
audio.play();
}
$(".green").click(sound("green")) 问题是，当我运行这段代码时，它显示&#
浏览 105提问于2020-12-18得票数 2
回答已采纳
我需要在基于业务逻辑的新请求上使用音频。当我调用"playAudio()“时，Page Load中的这个函数表示NgOninit它不工作。它给了我下面的错误。 prescan-orderlist.component.ts:116 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. 我在寻找它，但基于crome的新政策，他们已经限制了。 如果你有任何想法来实现这一点，请帮助我。 public playAudio()
浏览 36提问于2019-12-12得票数 0
1回答
如何处理“Uncaught (in promise) DOMException: play()失败，因为用户没有首先与文档交互。”在使用Chrome 66的台式机上？我的代码是
<video
title="Advertisement"
style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
src="http://commondatastorage.googleapis.com/gtv-videos-
浏览 26提问于2021-02-17得票数 3
当我点击一个图片时，我试图播放一个mp3声音，但是现在我得到了这个错误：Uncaught (in promise) DOMException: Failed to load because no supported source was found 为什么我的音频不能播放，我怎样才能让它播放？ 我的函数： playSound() {
const sound = new Audio("/src/assets/sounds/openbeersound.wav");
sound.play();
} <img
style="width: 1
浏览 491提问于2020-10-22得票数 0
我有一个组件，播放音频在几个不同的场合，所有他们都工作得很好，与相同的功能audio.play()，但1次我有它在useEffect内，它不工作。
这是我的代码：
import ring from '../assets/ring.mp3';
let audio = new Audio(ring);
useEffect(()=> {
audio.play();
}, [relativeEndDate])
这是我的错误：
Uncaught Error: The error you provided does not contain a stack trace.
浏览 2提问于2021-05-23得票数 0
2回答
铬不自动播放静音视频
、、、
我试图自动播放一个视频，它在safari和firefox中工作，但在chrome中不起作用。我有一个低调的属性，我也试着用类型记录播放它，但是得到了一个错误，比如："Uncaught (in promise) DOMException: play()失败了，因为用户没有先与文档交互“，我知道这与google的新政策有关，但是我能做些什么来修复这个bug呢？
浏览 0提问于2018-07-10得票数 0
我在我的应用程序中使用用create创建的React功能组件，所以React.StrictMode是自动启用的。我不想禁用它，因为它正在帮助我发现潜在的问题，因为它正在发展。问题在于，它使组件呈现两次，从而产生错误：
Uncaught DOMException:未能在“AudioContext”上执行“createMediaElementSource”：HTMLMediaElement之前已经连接到不同的MediaElementSourceNode，因为HTMLMediaElement在第一个呈现中连接。我在想，有没有办法把HTMLMediaElement和以前的MediaElementSou
浏览 15提问于2022-08-20得票数 1
回答已采纳
2回答
我正在尝试让响应式的声音读出每个句子，并且每个读出之间必须有1分钟的间隔。
function read(){
responsiveVoice.speak('قلم','Arabic Female');
}
var a = [1,2,3];
$(a).each( function(){
setTimeout(function(){ read(); }, 1000);
});
浏览 2提问于2016-10-26得票数 1
我正在开发一个web系统来监控数据库中的一些值，当收到一系列值时，我需要播放一些声音警报。我试过很多网络样例，但任何人都可以。返回的错误为uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first。最后一次尝试是使用下面的代码： <audio id="myAudio" muted="muted">
<source src="./resources/soun
浏览 28提问于2019-12-24得票数 0
2回答
当用户与页面交互时，我正在尝试自动播放视频。如果我以前播放过这段视频，显然会出现一个安全错误：
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
这是公平的，我捕捉到了这个错误，现在我想注册一个事件，以便在用户与页面交互时重新尝试play。
=>有这样的活动可用吗？
我尝试在mouseover / mousemove / touchmove / click / focus / visibilitychanged上注册
浏览 0提问于2018-09-04得票数 8
我有一个welcome.html文件，因为我在源属性中有一个音频标签，我正在从jio-saavan添加链接，但当网页打开时，它不会播放，但在控制台中，我收到以下错误。
Error on console
welcome.html:28 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
<audio autoplay id="my_audio">
<source src="htt
浏览 9提问于2021-10-29得票数 0
我正在构建一个基于Django的web应用程序，在其中我想在浏览器中播放来自服务器的音频文件，点击一个按钮。该文件随应用程序的使用而变化，因此我通过audio元素的src属性调用Django视图，如下所示： <audio id="audio" src="{% url 'play' 'for-sure' %}" type="audio/wav"></audio> 这里，for-sure是要播放的默认文件名。下面是映射视图函数： def play(request, file_name):
浏览 107提问于2019-09-03得票数 0
如何处理“Uncaught (in promise) DOMException: play()失败，因为用户没有首先与文档交互。”使用Chrome 85？我正在尝试使用自动播放(带有jquery插件)。 HTML代码： <audio loop id="scrollaudio" src="sound/stranger.mp3"></audio> JavaScript代码： <script> $(function() { var first = new AudioFade('#scrollaudio', 100,
浏览 76提问于2020-09-07得票数 0
2回答
我有几个视频要显示在我的应用程序。我想要的是，如果它被盘旋，它会播放，当鼠标离开它，它会暂停。然而，我的问题是它输出了一个错误Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()。
下面是我的代码
const Video = ({ video }) => {
const videoRef = useRef();
return (
<div
onMouseOver={() => video?.promoVideoUrl &
浏览 0提问于2021-03-26得票数 0
回答已采纳
我正在对我的socket.io聊天进行几次更新，并且每次有消息通过时，我都会尝试获得音频。当我发送消息时，我得到了Uncaught (in promise) DOMException，这是当消息通过时运行的代码：
socket.on('new message', (data) => {
var messageE = document.createElement('div')
messageE.classList.add("well");
messageE.classLi
浏览 0提问于2019-02-27得票数 2
在我的React应用程序中，我在遍历数组后显示卡片(因此理论上可以有n卡)。
当用户单击卡时，我希望显示在卡片中的文本被复制。但是问题是，react应用程序是在iframe中呈现的。
当应用程序在一个单独的选项卡中时，复制功能可以工作。但是，当从iframe内部尝试时，我会遇到以下错误：
Uncaught (in promise) DOMException: Disabled in this document by Feature Policy.
这与谷歌的政策变化有关。有什么方法可以让这个功能发挥作用吗？
附加信息:在iframe中呈现的应用程序与父应用程序不共享相同的域。
背景阅读链接：
浏览 25提问于2020-04-24得票数 15
我正在使用视频标签html，但视频不播放时，页面加载，然后移动后，另一个页面是working.please给我解决方案。
<video #videoPlayer class="slider-video" width="100%" preload="auto" loop="" muted="muted" style="visibility: visible; width: 100%;"
poster="assets/images/banner.png" src="ht
浏览 0提问于2018-06-22得票数 0
1回答
我正试图为我的Laravel5.7应用程序添加一个Noty实例的声音，并且似乎遇到了一些问题。我得到的错误是Uncaught(in promise) DOMException和Get... 404，但我在VScode中使用了Path intellisense加载项，所以我确信它是正确的。这是我的代码：
new Noty({
text:'Example',
type:'info',
timeout:2000
}).on('onShow', function() {
浏览 0提问于2019-01-08得票数 0
回答已采纳
我试图加载一个音频，我得到两个错误，但一切都很好，来源是正确的。
错误：
GET 404 (未找到) -Uncaught (承诺) DOMException:未能加载，因为没有找到支持的源。
javascript：
this.sound = new Audio();
this.sound.src = 'src/assets/sound/welcome_Rift.mp3';
this.sound.load();
this.sound.play();
文件路径:src/资产/声音/欢迎_Rift.mp3
我不知道我为什么要犯这个错误
浏览 3提问于2020-09-12得票数 0
2回答
我试图播放一个音频文件：
path = '/public/recordings/weekday/1.mp3'
const audio = new Audio(path)
audio.play()
如果路径无效，则控制台中将出现以下警告：
Uncaught (in promise) DOMException: Failed to load because no supported source was found.
是否有一个javascript方法来检查文件是否存在，这样我就可以避免调用play了？
我想答案就在这个医生身上：
我确实找到了解决办法，但我不喜欢这样：
audi
浏览 8提问于2022-06-07得票数 1
回答已采纳
当我试图在进步的web应用程序页面上添加一个服务工作人员时，浏览器控制台为什么会显示以下错误？
ERROR "Uncaught (in promise) DOMException: Only secure origins are allowed
“联合来文法典”：
(function () {
'use strict';
// TODO add service worker code here
if ('serviceWorker' in navigator) {
navigator.serviceWorker
浏览 6提问于2016-12-29得票数 27
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
