DOMException：加载失败，因为未找到支持的源

Question

I'm getting DOMException: Failed to load because no supported source was found in video.play();我收到DOMException: Failed to load because no supported source was found in video.play(); line.线。 I'm getting this issue only after adding video.setAttribute('crossorigin', 'anonymous');只有在添加 video.setAttribute('crossorigin', 'anonymous'); 之后我才遇到这个问题I'm developing app in mobile so for cross origin i need to add this line.我正在开发移动应用程序，因此对于跨源我需要添加这一行。 After update of chrome 50 version i'm getting this issue before that it works fine.更新 chrome 50 版本后我遇到了这个问题，但它工作正常。

<!DOCTYPE html>
    <html>
    <head> 
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    </head> 
    <body>  
    <script>     
     var video = document.createElement( 'video' ); 

     video.id = 'video';    
     video.type = ' video/mp4; codecs="theora, vorbis" ';   
     video.src = "http://abcde.com/img/videos/what_is_design_thinking.mp4"; 
     video.volume = .1; 
     video.setAttribute('crossorigin', 'anonymous');    
     video.load(); // must call after setting/changing source   

     $('body').html(video);
     video.play();  

     var canvas = document.createElement('canvas');
     var ctx = canvas.getContext('2d');

     $('body').append(canvas);

     video.addEventListener('play', function() {
       var $this = this; //cache
       (function loop() {
       if (!$this.paused && !$this.ended) {
       ctx.drawImage($this, 0, 0);
       setTimeout(loop, 1000 / 30); // drawing at 30fps
       }
       })();
      }, 0);

    </script>
    </body> 
    </html>

Answer 1

This problem occurs in newer Chrome/Chromium browsers starting from v50此问题出现在从 v50 开始的较新的 Chrome/Chromium 浏览器中

From HTMLMediaElement.play() Returns a Promise by Google Developers :从HTMLMediaElement.play() 返回 Google Developers 的承诺：

Automatically playing audio and video on the web is a powerful capability, and one that's subject to different restrictions on different platforms.在网络上自动播放音频和视频是一项强大的功能，并且在不同平台上受到不同限制。 Today, most desktop browsers will always allow web pages to begin <video> or <audio> playback via JavaScript without user interaction.今天，大多数桌面浏览器将始终允许网页通过 JavaScript 开始<video>或<audio>播放，而无需用户交互。 Most mobile browsers, however, require an explicit user gesture before JavaScript-initiated playback can occur.然而，大多数移动浏览器在 JavaScript 启动的播放发生之前需要明确的用户手势。 This helps ensure that mobile users, many of whom pay for bandwidth or who might be in a public environment, don't accidentally start downloading and playing media without explicitly interacting with the page.这有助于确保移动用户（其中许多人为带宽付费或可能在公共环境中）不会在没有明确与页面交互的情况下意外开始下载和播放媒体。

It's historically been difficult to determine whether user interaction is required to start playback, and to detect the failures that happen when (automatic) playback is attempted and fails.历史上很难确定是否需要用户交互才能开始播放，以及检测在（自动）播放尝试和失败时发生的故障。 Various workarounds exist, but are less than ideal.存在各种变通方法，但都不太理想。 An improvement to the underlying play() method to address this uncertainty is long overdue, and this has now made it to the web platform, with an initial implementation in Chrome 50.早就应该对底层play()方法进行改进以解决这种不确定性，现在已经在网络平台上进行了改进，并在 Chrome 50 中进行了初步实现。

A play() call on an a <video> or <audio> element now returns a Promise. <video>或<audio>元素上的play()调用现在返回一个 Promise。 If playback succeeds, the Promise is fulfilled, and if playback fails, the Promise is rejected along with an error message explaining the failure.如果播放成功，则 Promise 完成，如果播放失败，则 Promise 将被拒绝，并显示一条解释失败的错误消息。 This lets you write intuitive code like the following:这使您可以编写如下直观的代码：
 var playPromise = document.querySelector('video').play(); // In browsers that don't yet support this functionality, // playPromise won't be defined. if (playPromise !== undefined) { playPromise.then(function() { // Automatic playback started! }).catch(function(error) { // Automatic playback failed. // Show a UI element to let the user manually start playback. }); }
In addition to detecting whether the play() method was successful, the new Promise-based interface allows you to determine when the play() method succeeded.除了检测 play() 方法是否成功之外，新的基于 Promise 的接口允许您确定play()方法何时成功。 There are contexts in which a web browser may decide to delay the start of playback—for instance, desktop Chrome will not begin playback of a <video> until the tab is visible.在某些情况下，Web 浏览器可能会决定延迟开始播放——例如，桌面 Chrome 在选项卡可见之前不会开始播放<video> 。 The Promise won't fulfill until playback has actually started, meaning the code inside the then() will not execute until the media is playing. Promise 在播放实际开始之前不会执行，这意味着then()的代码在媒体播放之前不会执行。 Previous methods of determining if play() is successful, such as waiting a set amount of time for a playing event and assuming failure if it doesn't fire, are susceptible to false negatives in delayed-playback scenarios.之前确定play()是否成功的方法，例如等待播放事件的设定时间并假设它没有触发则失败，在延迟播放场景中容易出现误报。

Credits: Failed to load because no supported source was found.致谢：无法加载，因为找不到支持的源。 when playing HTML5 audio element 播放 HTML5 音频元素时

Answer 2

I've had the same issue in VueJS.我在 VueJS 中遇到过同样的问题。 The thing that worked for me was to replace:对我有用的是替换：

const audio = new Audio(required('../assets/sound.mp3')) 
audio.play()

with:和：

import sound from '../assets/sound.mp3'
const audio = new Audio(sound)
audio.play()

Answer 3

I had the same error and it turned out to be a CORS issue.我遇到了同样的错误，结果证明是 CORS 问题。

Instead of而不是

video.setAttribute('crossorigin', 'anonymous');

try the more explicit way:尝试更明确的方式：

video.crossOrigin = 'anonymous';

And make sure that the server response has the header Access-Control-Allow-Origin: * .并确保服务器响应具有标头Access-Control-Allow-Origin: * 。 Or instead of the asterisk wildcard, specify the domain of the website that is allowed to access the video from the server.或者代替星号通配符，指定允许从服务器访问视频的网站的域。

Answer 4

I had the same problem with an mp3 file.我对 mp3 文件有同样的问题。 My solution was to add content to the html through javascript.我的解决方案是通过 javascript 向 html 添加内容。

Example of HTML where i'm going to put the file to be played.我要在其中放置要播放的文件的 HTML 示例。

<span id="audio"></span>

And in javascript:在 javascript 中：

$('#audio').html('<audio autoplay><source src="audio/ding.mp3"></audio>');

This will play the audio, assuming its the same for video.这将播放音频，假设它与视频相同。

Hope it helps希望它有帮助

Answer 5

I had the same problem, but the cause was the file name contained a '#'.我遇到了同样的问题，但原因是文件名包含“#”。

Apparently, if the file name contains a '#' I would get net::ERR_FILE_NOT_FOUND if setting the src directly to the string显然，如果文件名包含“#”，如果将 src 直接设置为字符串，我会得到net::ERR_FILE_NOT_FOUND

document.getElementById('audio').src = '../path/x#y.webm';
console.log(document.getElementById('audio').src); // C:\Users\x\y\z\path\x#y.webm

But would get a DOMException: The element has no supported sources.但是会得到一个DOMException: The element has no supported sources. when using node's path.resolve even though the html element's src attribute would be the same使用节点的path.resolve即使 html 元素的src属性是相同的

document.getElementById('audio').src = path.resolve('path', 'x#y.webm');
console.log(document.getElementById('audio').src); // C:\Users\x\y\z\path\x#y.webm

Renaming the file name to xy.webm resolved the issue.将文件名重命名为xy.webm解决了该问题。

This was using electron on windows, it may not be the case on other os's or on web apps.这是在 Windows 上使用电子，在其他操作系统或网络应用程序上可能不是这种情况。

Answer 6

如果您遇到此错误并且上述答案均不适用“DOMException: Failed to load because no supported source was found”可能意味着您打开了代码而没有打开包含要播放的音频或视频文件的文件

Answer 7

This same error can crop up if you are serving your app/site from localhost (eg during development) with http, and have the files stored in a Cache that you are using match() to determine if the file is in the Cache (or not).如果您使用 http 从本地主机（例如在开发期间）为您的应用程序/站点提供服务，并且将文件存储在缓存中，您正在使用 match() 来确定文件是否在缓存中（或不是）。 In my case, I had to add an option to set 'ignoreVary' to true on the call to match(), either on the call you make explicitly:就我而言，我必须添加一个选项，以便在调用 match() 时将 'ignoreVary' 设置为 true，无论是在您明确进行的调用中：

await myCache.match(filename, {ignoreVary: true}) // ignoreVary for localhost

or if using workbox in a service worker:或者如果在 Service Worker 中使用工作箱：

workbox.strategies.cacheOnly({
  cacheName: myCacheName,
  matchOptions: {
    ignoreVary: true, // <- this is the important bit
  },
  plugins: [
    /* bla bla */
  ]
})

Refs: https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage/match https://github.com/GoogleChrome/workbox/issues/1550参考： https : //developer.mozilla.org/en-US/docs/Web/API/CacheStorage/match https://github.com/GoogleChrome/workbox/issues/1550

Answer 8

I had this same error, and the issue was that the file itself was not set to public, therefore there was no source loading for the file.我有同样的错误，问题是文件本身没有设置为公开，因此没有为文件加载源。

Answer 9

I'm just learning and made a DrumKit page using Javascript, when I open in live server (Visual Studio Code) it worked perfect, but when upload to github there was no sound... I was watching and reading and find this:我正在学习并使用 Javascript 制作了一个 DrumKit 页面，当我在实时服务器（Visual Studio Code）中打开它时它工作完美，但是当上传到 github 时没有声音......我正在观看和阅读并发现这个：

I was using this code enter image description here我正在使用此代码在此处输入图片描述

and the error was: "Failed to load because no supported source was found".错误是：“无法加载，因为没有找到支持的源”。

The way to make it work was so easy like add a dot before / enter image description here让它工作的方法非常简单，就像在此处添加一个点/输入图像描述一样

I hope my first contribution help someone with this errors.我希望我的第一份贡献能帮助有此错误的人。

Answer 10

This may help some people, but sometimes this means you have given a nonexistent path to a file.这可能对某些人有帮助，但有时这意味着您提供了一个不存在的文件路径。 For example:例如：

const Audio = new Audio("/music.mp3")

isn't a file in the root directory, so Javascript throws an error.不是根目录中的文件，因此 Javascript 会引发错误。 An easy fix is一个简单的解决方法是

const Audio = new Audio("./music.mp3")

, which will check the current directory instead of the root directory. ，这将检查当前目录而不是根目录。

REMEMBER:记住：

./ = Current directory ./ = 当前目录
/ = Root directory / = 根目录
../ = Parent directory ../ = 父目录

Answer 11

I had this problem in a NodeJS / Electron app.我在 NodeJS/Electron 应用程序中遇到了这个问题。 It turned out to be the path to the audio file was wrong.原来是音频文件的路径不对。

Answer 12

  <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>append demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p>I would like to say: </p>

<script>
 var video = document.createElement( 'video' ); 

     video.id = 'video';    
     video.type = ' video/mp4; codecs="theora, vorbis" ';   
     video.src = "http://www.w3schools.com/html/mov_bbb.mp4"; 

    // $('body').html(video);
     video.play();  
     video.addEventListener('play', function() {
       var $this = this; //cache
       (function loop() {
       if (!$this.paused && !$this.ended) {      
       setTimeout(loop, 1000 / 30); // drawing at 30fps
       }
       })();
      }, 0);
$( "p" ).append( video );
</script>

</body>
</html>

DOMException：加载失败，因为未找到支持的源

问题描述

12 个解决方案

解决方案1
28 已采纳 2016-10-25 11:19:32

From HTMLMediaElement.play() Returns a Promise by Google Developers :从HTMLMediaElement.play() 返回 Google Developers 的承诺：

解决方案2
24 2021-09-08 11:14:22

解决方案3
4 2017-04-16 07:15:53

解决方案4
2 2017-02-17 15:39:05

解决方案5
2 2019-01-23 15:03:28

解决方案6
0 2020-06-26 10:03:22

解决方案7
0 2021-02-23 09:10:20

解决方案8
0 2022-11-12 20:10:15

解决方案9
0 2022-11-30 18:52:44

解决方案10
0 2023-01-30 01:19:57

REMEMBER:记住：

解决方案11
-2 2018-05-24 20:53:47

解决方案12
-3 2016-06-07 08:50:40

DOMException：加载失败，因为未找到支持的源

问题描述

12 个解决方案

解决方案1 28 已采纳 2016-10-25 11:19:32

From HTMLMediaElement.play() Returns a Promise by Google Developers :从HTMLMediaElement.play() 返回Google Developers 的承诺：

解决方案2 24 2021-09-08 11:14:22

解决方案3 4 2017-04-16 07:15:53

解决方案4 2 2017-02-17 15:39:05

解决方案5 2 2019-01-23 15:03:28

解决方案6 0 2020-06-26 10:03:22

解决方案7 0 2021-02-23 09:10:20

解决方案8 0 2022-11-12 20:10:15

解决方案9 0 2022-11-30 18:52:44

解决方案10 0 2023-01-30 01:19:57

REMEMBER:记住：

解决方案11 -2 2018-05-24 20:53:47

解决方案12 -3 2016-06-07 08:50:40

解决方案1
28 已采纳 2016-10-25 11:19:32

From HTMLMediaElement.play() Returns a Promise by Google Developers :从HTMLMediaElement.play() 返回 Google Developers 的承诺：

解决方案2
24 2021-09-08 11:14:22

解决方案3
4 2017-04-16 07:15:53

解决方案4
2 2017-02-17 15:39:05

解决方案5
2 2019-01-23 15:03:28

解决方案6
0 2020-06-26 10:03:22

解决方案7
0 2021-02-23 09:10:20

解决方案8
0 2022-11-12 20:10:15

解决方案9
0 2022-11-30 18:52:44

解决方案10
0 2023-01-30 01:19:57

解决方案11
-2 2018-05-24 20:53:47

解决方案12
-3 2016-06-07 08:50:40