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

本文介绍了不支持所有类型时的HTML5视频后备的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在HTML5规范中，建议您将后备素材放在不支持该功能的旧版浏览器的<video>标记中.

In the HTML5 spec, it suggests you put fallback material in the <video> tag for older browsers that do not support it.

<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.因此，我希望这会呈现后备文本.

However, I cannot find anything for fallbacks when all source types are unsupported. For instance, my Chromium browser cannot play video/mp4, but it can play video/ogg. So I would expect this to render the fallback text.

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

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

Instead, I just get a video player with nothing in it because it can't load the mp4 file.

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

Is there a way to have a fallback in HTML 5 video when there is no usable video source? I am aware that the fallback I was attempting is only for old browsers, but I still need a fallback for no available source.

推荐答案

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

Actually, when you try to load unsupported media types in <source> element, an error event will fire.
You could then listen to these events, and if none of the sources is recognized, trigger the fallback :

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>