DomeException:未能加载，因为找不到支持的源

作者

我得到DOMException:加载失败，因为在video.play（）中找不到支持的源文件；线我只是在添加video.setAttribute（’crossorigin’，’anonymous’）后才发现这个问题；我正在手机上开发应用程序，所以对于跨源，我需要添加这一行。在Chrome50版本更新之后，我发现这个问题之前，它工作正常

&lt；！DOCTYPE html&gt；
&lt；html&gt；
&lt；头&gt；
&lt；脚本src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js“&gt&lt/脚本&gt；
&lt/头&gt；
&lt；车身&gt；
&lt；脚本&gt；
var video=document.createElement（'video'）；
video.id='video'；
video.type='视频/mp4；codecs=“theora，vorbis”；
video.src=”http://abcde.com/img/videos/what_is_design_thinking.mp4"; 
视频音量=.1；
setAttribute（'crossorigin'，'anonymous'）；
video.load（）；//设置/更改源后必须调用
$（'body'）.html（视频）；
video.play（）；
var canvas=document.createElement（'canvas'）；
var ctx=canvas.getContext（'2d'）；
$（'body'）.append（画布）；
video.addEventListener（'play'，function（）{
var$this=this；//缓存
（函数循环（）{
如果（！$this.paused&amp；！$this.end）{
ctx.drawImage（$this，0，0）；
setTimeout（循环，1000/30）；//以30fps的速度绘制
}
})();
}, 0);
&lt/脚本&gt；
&lt/车身&gt；
&lt/html&gt；

这个问题发生在v50开始的较新的Chrome/Chrome浏览器中

从HTMLMediaElement.play（）返回Google开发者的承诺：

在网络上自动播放音频和视频是一种强大的功能，在不同的平台上受到不同的限制。如今，大多数桌面浏览器将始终允许网页开始&lt；视频&gt或&lt；音频&gt通过JavaScript播放，无需用户交互。然而，大多数移动浏览器需要显式的用户手势，才能进行JavaScript启动的播放。这有助于确保移动用户（其中许多人为带宽付费或可能在公共环境中）不会在没有与页面明确交互的情况下意外开始下载和播放媒体

从历史上看，很难确定是否需要用户交互才能开始播放，也很难检测尝试（自动）播放但失败时发生的故障。存在各种变通办法，但并不理想。早就应该改进底层的play（）方法来解决这种不确定性，现在这种改进已经应用到web平台上，并在Chrome 50中进行了初步实现

Aplay（）调用A&lt；视频&gt或&lt；音频&gt</元素现在返回一个承诺。如果播放成功，则承诺得到履行；如果播放失败，则承诺将被拒绝，并显示一条解释失败的错误消息。这使您可以编写如下直观代码：

var playPromise=document.querySelector（'video'）.play（）；
//在尚不支持此功能的浏览器中，
//playPromise不会被定义。
如果（playPromise！==未定义）{
playPromise.then（函数（）{
//自动播放开始了！
}).catch（函数（错误）{
//自动播放失败。
//显示UI元素以允许用户手动开始播放。
});
}

除了检测play（）方法是否成功外，新的基于Promise的接口还允许您确定play（）方法何时成功。在某些情况下，web浏览器可能会决定延迟播放的开始。例如，桌面Chrome不会开始播放&lt；视频&gt直到选项卡可见。在播放真正开始之前，承诺不会兑现，这意味着then（）中的代码在媒体播放之前不会执行。以前确定play（）是否成功的方法，如等待播放事件的设定时间，如果不触发则假设失败，在延迟播放场景中容易出现误报

Credits:未能加载，因为找不到支持的源。播放HTML5音频元素时

相关文章：

  1. 如何使图元水平居中
  2. 使用CSS更改HTML5输入的占位符颜色
  3. 为什么HTML认为“chucknorris”是一种颜色？
  4. 在CSS中设置单元格填充和单元格间距？

发表评论

© 2026 开发百科-程序代码问答平台 • Built with