DOMException:无法加载,因为找不到支持的源

Question

DOMException:无法加载,因为找不到支持的源

我收到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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Cos*_*ian 35

我在 VueJS 中也遇到过同样的问题。对我有用的事情是替换：

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

Run Code Online (Sandbox Code Playgroud)

和：

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

Run Code Online (Sandbox Code Playgroud)

使用 Vue JS 3 工作起来非常有魅力！非常感谢... (3认同)

Answer 2

Edw*_*lds 21

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

从HTMLMediaElement.play()返回一个承诺由谷歌开发者:

在Web上自动播放音频和视频是一种强大的功能,并且受到不同平台的不同限制.如今,大多数桌面浏览器始终允许通过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.
  });
}
Run Code Online (Sandbox Code Playgroud)
除了检测play()方法是否成功之外,新的基于Promise的界面还允许您确定play()方法何时成功.在某些情况下,网络浏览器可能会决定延迟播放的开始 - 例如,桌面Chrome <video>在标签可见之前不会开始播放.在播放实际开始之前,Promise将无法实现,这意味着then()在媒体播放之前,内部代码将不会执行.先前确定是否play()成功的方法,例如等待播放事件的设定时间量并且如果不触发则假设失败,在延迟回放场景中容易出现假阴性.

致谢:由于未找到支持的来源,因此无法加载.播放HTML5音频元素时

对play()的promise的添加与问题中的DOMException错误无关.这是一个CORS问题. (5认同)
正如@MichaelFranzl上面提到的，错误不是因为promise，当音频不存在于作为源提供的url上时也可能发生错误 (3认同)

Answer 3

Mic*_*nzl 6

我也遇到了同样的错误，结果是 CORS 问题。

代替

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

Run Code Online (Sandbox Code Playgroud)

尝试更明确的方式：

video.crossOrigin = 'anonymous';

Run Code Online (Sandbox Code Playgroud)

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

请注意，在第一个版本中，您设置“crossorigin”，而在第二个“crossOrigin”中，Origin 中使用大写 O。这可能是造成差异的原因，而不是方法的不同。 (7认同)
@PerQuestedAronsson我认为属性名称应该都是小写，迈克尔的似乎是正确的。https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video (2认同)

Answer 4

Sim*_*ton 5

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

我将在其中放置要播放的文件的 HTML 示例。

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

Run Code Online (Sandbox Code Playgroud)

在 JavaScript 中：

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

Run Code Online (Sandbox Code Playgroud)

这将播放音频，假设视频也是如此。

希望能帮助到你

归档时间：	9 年，3 月前
查看次数：	57892 次
最近记录：	6 年，7 月前