Question

我收到 DOMException：无法加载，因为在video.play（）中找不到支持的来源;线。我只是在添加了video.setAttribute（'crossorigin'，'anonymous'）之后才遇到这个问题;我正在开发移动应用程序，所以对于交叉起源我需要添加这一行。在更新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

从v50

开始，较新的Chrome / Chromium浏览器会出现此问题

从HTMLMediaElement.play() Returns a Promise Google Developers开始：

在网络上自动播放音频和视频是一项强大的功能，并且受到不同平台的不同限制。今天，大多数桌面浏览器始终允许网页通过JavaScript开始<video>或<audio>播放而无需用户互动。但是，大多数移动浏览器在JavaScript启动的播放发生之前都需要明确的用户手势。这有助于确保移动用户（其中许多人为带宽付费或可能在公共环境中）不会在未明确与页面交互的情况下意外开始下载和播放媒体。

历史上很难确定是否需要用户交互来开始播放，以及检测尝试（自动）播放和失败时发生的故障。存在各种变通方法，但不太理想。对于解决这种不确定性的基础play()方法的改进早就应该进行了，现在已经进入了网络平台，并在Chrome 50中进行了初步实施。

对play()或<video>元素进行<audio>调用现在会返回Promise。如果播放成功，则表示Promise已完成，如果播放失败，则拒绝Promise以及解释失败的错误消息。这使您可以编写如下的直观代码：
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.
  });
}
除了检测play（）方法是否成功之外，新的基于Promise的界面还允许您确定play()方法何时成功。在某些情况下，网络浏览器可能会决定延迟播放的开始 - 例如，桌面Chrome在标签可见之前不会开始播放<video>。在播放实际开始之前，Promise将无法实现，这意味着then()内的代码在播放媒体之前不会执行。以前用于确定play()是否成功的方法，例如等待播放事件的设定时间，如果不触发则假设失败，在延迟播放场景中容易出现漏报。

致谢：Failed to load because no supported source was found. when playing HTML5 audio element

Answer 2

我对mp3文件有同样的问题。我的解决方案是通过javascript将内容添加到html。

我将要播放文件的HTML示例。

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

在javascript中：

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

这将播放音频，假设视频相同。

希望有所帮助

Answer 3

我遇到了同样的错误，结果证明是一个CORS问题。

而不是

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

尝试更明确的方式：

video.crossOrigin = 'anonymous';

确保服务器响应具有标头Access-Control-Allow-Origin: *。或者，而不是星号通配符，指定允许从服务器访问视频的网站的域。

Answer 4

我遇到了同样的问题，但是原因是文件名包含一个“＃”。

很明显，如果文件名包含'＃'，如果将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

但是，即使html元素的DOMException: The element has no supported sources.属性相同，使用节点的path.resolve时也会得到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

将文件名重命名为x-y.webm解决了该问题。

这是在Windows上使用电子，在其他操作系统或Web应用程序上可能不是这种情况。

Answer 5

如果您遇到此错误，并且以上所有答案均不适用“ DOMException：由于找不到支持的源而无法加载”，可能意味着您打开了代码而未打开包含要播放的音频或视频文件的文件< / p>

Answer 6

如果您使用 http 从本地主机（例如在开发期间）为您的应用程序/站点提供服务，并将文件存储在缓存中，您正在使用 match() 来确定文件是否在缓存（或不缓存）。就我而言，我必须添加一个选项，以便在调用 match() 时将 'ignoreVary' 设置为 true，无论是在您明确进行的调用中：

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

或者如果在 Service Worker 中使用工作箱：

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

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

Answer 7

ViewHolder

Answer 8

我在NodeJS / Electron应用程序中遇到此问题。事实证明，音频文件的路径是错误的。

DOMException：无法加载，因为找不到支持的源

8 个答案:

从HTMLMediaElement.play() Returns a Promise Google Developers开始：