不支持所有类型时的HTML5视频后备

Question

在HTML5规范中，建议您将后备素材放入<video>不支持它的旧版浏览器的代码中。

<video width="400" controls>
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
</video>

但是，当不支持所有源类型时，我找不到任何可用于回退的东西。例如，我的Chromium浏览器无法播放video/mp4，但可以播放video/ogg。因此，我希望这会呈现后备文本。

<video width="400" controls>
    <source src="mov_bbb.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

相反，我只是得到了一个没有任何内容的视频播放器，因为它无法加载mp4文件。

没有可用的视频源时，是否有办法在HTML 5视频中进行回退？我知道我尝试的回退仅适用于旧版浏览器，但仍然需要回退，因为没有可用的源。

Answer 1

实际上，当您尝试在<source>元素中加载不受支持的媒体类型时，error将触发一个事件。
然后，您可以侦听这些事件，如果没有识别出任何源，则触发回退：

var sources = document.querySelectorAll('source');
var source_errors = 0;
for (var i = 0; i < sources.length; i++) {
  sources[i].addEventListener('error', function(e) {
    if (++source_errors >= sources.length)
      fallBack();
  });
}

function fallBack() {
  document.body.removeChild(document.querySelector('video'));
  document.body.appendChild(document.createTextNode('No video with supported media and MIME type found'));
}

<video controls>
  <source src="foo.bar" type="video/foo" />
  <source src="bar.foo" type="video/bar" />
</video>