DOMException：由于找不到支持的源而无法加载 [英] DOMException: Failed to load because no supported source was found
问题描述
我得到 DOMException：无法加载，因为在video.play（）中找不到支持的源;线。我只有在添加video.setAttribute（'crossorigin'，'anonymous'）后才会出现此问题;我正在开发移动应用程序，所以我需要添加这一行。
<！DOCTYPE html>>在更新chrome 50版本之后，我得到了这个问题，
< 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（）; //设置/更改源后必须调用
$（'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.paded&！$ this.ended）{
ctx.drawImage（$ this，0，0）;
setTimeout（loop，1000/30）; //以30fps绘制
}
}）（）;
}，0）;
< / script>
< / body>
< / html>
在较新的Chrome / Chromium浏览器中， v50
从 HTMLMediaElement.play（）通过 Google Developers 返回Promise ：
在网络上自动播放音频和视频是一项强大的功能，并且受到不同平台上的不同限制。今天，大多数桌面浏览器将始终允许网页通过JavaScript开始
< video>或<音频>播放。没有用户交互。然而，大多数移动浏览器在JavaScript发起播放之前需要明确的用户手势。这有助于确保移动用户（他们中的许多人支付带宽或者可能处于公共环境中）不会意外开始下载和播放媒体，而不显式地与页面交互。
历史上很难确定是否需要用户交互才能开始播放，并检测尝试（自动）播放时发生的故障并发生故障。存在各种解决方法，但并不理想。为了解决这种不确定性，底层的
play（）方法的改进已经过时了很久，现在它已经进入了Web平台，并在Chrome 50中初步实现。
< video> 或< audio>元素现在返回一个Promise。如果播放成功，Promise就会被执行，如果播放失败，Promise将被拒绝并显示一条错误消息来解释失败。这可以让你编写如下的直观代码：
var playPromise = document.querySelector（'video'）。play（）;
//在尚不支持此功能的浏览器中，
// playPromise不会被定义。
if（playPromise！== undefined）{
playPromise.then（function（）{
//自动播放开始！
}）。catch（function（error）{
//自动播放失败
//显示一个UI元素让用户手动开始播放
}）;
$ b除了检测play（）方法是否成功之外，新的Promise基于接口的接口允许您确定何时play（）方法成功。有些情况下，网络浏览器可能会决定延迟播放的开始时间，例如，桌面版Chrome将不会开始播放< video>，直到标签可见。在播放实际开始之前，Promise才会完成，这意味着then（）中的代码在媒体播放前不会执行。以前确定play（）是否成功的方法是成功的，比如等待一段时间用于播放事件，并假设失败（如果它未触发），则容易出错在延迟播放的情况下是负面的。
积分：无法加载，因为没有找到支持的源。当播放HTML5音频元素时
I'm getting 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'); 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.
<!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>
This problem occurs in newer Chrome/Chromium browsers starting from v50
From HTMLMediaElement.play() Returns a Promise by 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. 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 thethen()will not execute until the media is playing. Previous methods of determining ifplay()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.
Credits: Failed to load because no supported source was found. when playing HTML5 audio element
这篇关于DOMException：由于找不到支持的源而无法加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
