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

Question

提问by Vijay Baskaran

I'm getting DOMException: Failed to load because no supported source was foundin video.play(); line. I'm getting this issue only after adding 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.

我收到DOMException: Failed to load 因为在 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

采纳答案by Edward Torvalds

This problem occurs in newer Chrome/Chromium browsers starting from v50

此问题出现在从 v50 开始的较新的 Chrome/Chromium 浏览器中

From HTMLMediaElement.play() Returns a Promiseby Google Developers:

从HTMLMediaElement.play（）返回一个承诺由谷歌开发者：

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. Most mobile browsers, however, require an explicit user gesture before JavaScript-initiated playback can occur. 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.
A play()call on an a <video>or <audio>element now returns a Promise. If playback succeeds, the Promise is fulfilled, and if playback fails, the Promise is rejected along with an error message explaining the failure. 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. 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. The Promise won't fulfill until playback has actually started, meaning the code inside the then()will not execute until the media is playing. 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.

在网络上自动播放音频和视频是一项强大的功能，并且在不同平台上受到不同限制。今天，大多数桌面浏览器将始终允许通过 JavaScript开始<video>或<audio>播放网页，而无需用户交互。然而，大多数移动浏览器在 JavaScript 启动的播放发生之前需要明确的用户手势。这有助于确保移动用户（其中许多人为带宽付费或可能在公共环境中）不会在没有明确与页面交互的情况下意外开始下载和播放媒体。
历史上很难确定是否需要用户交互才能开始播放，以及检测在（自动）播放尝试和失败时发生的故障。存在各种变通方法，但都不太理想。play()早就应该对底层方法进行改进以解决这种不确定性，现在已经在 Web 平台上进行了改进，并在 Chrome 50 中进行了初步实现。
一play()上的一个电话<video>或<audio>元素现在返回的承诺。如果播放成功，则 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()方法何时成功。在某些情况下，Web 浏览器可能会决定延迟开始播放——例如，桌面 Chrome<video>在选项卡可见之前不会开始播放。Promise 在播放实际开始then()之前不会执行，这意味着在媒体播放之前，Promise 中的代码不会执行。之前确定是否play()成功的方法，例如等待播放事件的设定时间并假设它没有触发则失败，在延迟播放场景中容易出现误报。

Credits: Failed to load because no supported source was found. when playing HTML5 audio element

致谢：无法加载，因为找不到支持的源。播放 HTML5 音频元素时

Answer 2

回答by Simon Berton

I had the same problem with an mp3 file. My solution was to add content to the html through javascript.

我对 mp3 文件有同样的问题。我的解决方案是通过 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 3

回答by Michael Franzl

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: *. Or instead of the asterisk wildcard, specify the domain of the website that is allowed to access the video from the server.

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

Answer 4

回答by junvar

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_FOUNDif setting the src directly to the string

显然，如果文件名包含“#”，net::ERR_FILE_NOT_FOUND如果将 src 直接设置为字符串，我会得到

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.when using node's path.resolveeven though the html element's srcattribute would be the same

但是即使 html 元素的属性是相同的，DOMException: The element has no supported sources.在使用节点时也会得到一个path.resolvesrc

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 x-y.webmresolved the issue.

重命名文件名以x-y.webm解决问题。

This was using electron on windows, it may not be the case on other os's or on web apps.

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

Answer 5

回答by Gayathri Mohan

  <!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>

Answer 6

回答by kurtk

I had this problem in a NodeJS / Electron app. It turned out to be the path to the audio file was wrong.

我在 NodeJS/Electron 应用程序中遇到了这个问题。原来是音频文件的路径不对。

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

提问by Vijay Baskaran

采纳答案by Edward Torvalds

From HTMLMediaElement.play() Returns a Promiseby Google Developers:

从HTMLMediaElement.play（）返回一个承诺由谷歌开发者：

回答by Simon Berton

回答by Michael Franzl

回答by junvar

回答by Gayathri Mohan

回答by kurtk

相关推荐

最近更新

标签

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

提问by Vijay Baskaran

采纳答案by Edward Torvalds

From HTMLMediaElement.play() Returns a Promiseby Google Developers:

从HTMLMediaElement.play（）返回一个承诺由谷歌开发者：

回答by Simon Berton

回答by Michael Franzl

回答by junvar

回答by Gayathri Mohan

回答by kurtk

相关推荐

JavaScript onClick 更改 css

Javascript angular2(typescript) 从另一个文件导出变量

Javascript 如何确定字符串是否包含重复字母序列

Javascript React - 数组或迭代器中的每个孩子都应该有一个唯一的“键”道具

相关推荐

最近更新

标签