HTML5 - 尝试使用源元素加载视频时检测错误类型答案

【问题标题】：HTML5 - Detect the type of error when trying to load a video using a source elementHTML5 - 尝试使用源元素加载视频时检测错误类型
【发布时间】：2017-11-29 16:10:40
【问题描述】：

我刚刚发现使用<video> 元素的src 标记加载视频时处理错误与使用<source> 元素加载视频时处理错误之间存在一些差异。

例如，如果我尝试使用 video 元素的 src 标记加载未找到的视频流 (HTTP 404)，则会触发一个事件并且该元素存储错误数据：

HTML

<video src="http://not.found.url"></video>

var video = document.querySelector('video');

video.addEventListener('error', function(evt) {
  console.log(evt.target.error); // Object
});
video.load();

video 元素在error 中存储了一个MediaError 对象：

error: {
  code: 4,
  message: 'MEDIA_ELEMENT_ERROR: Format error'
}

但是，当我尝试使用 source 元素加载相同的视频流时：

HTML

<video>
  <source src="http://not.found.url">
</video>

var video = document.querySelector('video');
var source = document.querySelector('source');

video.addEventListener('error', function(evt) {
  // This event is not triggered
  console.log(evt.target.error); // null
});

source.addEventListener('error', function(evt) {
  console.log(evt.target.error); // null
});

video.load();

source 元素错误处理程序是唯一捕获错误但错误数据未存储在任何地方的错误处理程序。 video 元素和 source 元素都不存储错误对象，因此，我可以说错误已被触发，但我无法知道该错误的类型。

我想使用source 元素并能够检测错误的原因是无效的视频格式、404 资源还是任何其他原因。

这可能吗？

谢谢！

【问题讨论】：

请修正您的代码，使其使用正确的字符串分隔符。
@CBroe 完成！谢谢
我通过了specs，据我所知，没有解决方案。

标签： javascript html html5-video

【解决方案1】：

抱歉，error codes 无法帮助您解决 HTTP 错误。但是，使用<source>元素时获取错误码的正确方法如下：

<video class="video" autoplay controls>
    <source src="http://example.com/does-not-exist">
    <source src="http://example.com/corrupted-video">
    <source src="http://example.com/unsupported-video">
</video>
<script>
    var video = document.querySelector("video");
    var source = document.querySelector("source:last-child");
    // <source> elements are processed one by one until a usable source is found
    // if the last source failed then we know all sources failed

    video.addEventListener("error", function(e) {
        console.log("<video> error");
        console.log(e.target.error);
        // e.target would be the <video> element
        // e.target.error -- https://html.spec.whatwg.org/multipage/media.html#mediaerror
    });

    source.addEventListener("error", function(e) {
        console.log("<source> error");
        // e does not contain anything useful -- https://html.spec.whatwg.org/multipage/media.html#event-source-error
        // e.target would be the <source> element
        // e.target.parentNode would be the <video> element
        // e.target.parentNode.error -- https://html.spec.whatwg.org/multipage/media.html#mediaerror
        // e.target.parentNode.networkState -- https://html.spec.whatwg.org/multipage/media.html#dom-media-networkstate
        console.log(e.target.parentNode.error);
        console.log(e.target.parentNode.networkState);
    });
</script>

虽然这种方法不会告诉您 HTTP 错误，但您可以通过以下方式获得一些额外信息：

检查错误是否由<source> 或<video> 生成
查看error 和networkState

【讨论】：