如何检测HTML5视频标签支持的视频格式？

Question

我正在使用视频标签制作HTML5应用程序，在该应用程序中，用户选择一个视频文件，然后我播放该文件。这一切都是在本地进行的，因为我只链接到用户机器上的那个文件。

我希望在我的应用程序中仅允许播放浏览器可以播放的格式，并对不支持的格式显示错误。问题是不同的浏览器可以播放不同的格式。

我知道我可以检查浏览器并将其与我所知道的它可以播放的格式匹配，但如果浏览器更新以支持另一种格式怎么办？我将不得不使用新信息更新我的应用程序，同时用户将无法播放支持的格式。是否有一种方法只检查支持的视频格式？

- Cokegod

Answer 1

你可以使用HTMLVideoElement.prototype.canPlayType检查不同视频类型的编解码器。此外，还有一个很棒的HTML5特性检测库Modernizr。

var testEl = document.createElement( "video" ),
    mpeg4, h264, ogg, webm;
if ( testEl.canPlayType ) {
    // Check for MPEG-4 support
    mpeg4 = "" !== testEl.canPlayType( 'video/mp4; codecs="mp4v.20.8"' );

    // Check for h264 support
    h264 = "" !== ( testEl.canPlayType( 'video/mp4; codecs="avc1.42E01E"' )
        || testEl.canPlayType( 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"' ) );

    // Check for Ogg support
    ogg = "" !== testEl.canPlayType( 'video/ogg; codecs="theora"' );

    // Check for Webm support
    webm = "" !== testEl.canPlayType( 'video/webm; codecs="vp8, vorbis"' );
}

- Will

---

这对我帮助很大，谢谢。我很好奇为什么有两个测试用于mp4？我相信H264是mp4的一种类型，而我正在测试是否支持mp4或webm。 - edwinbradford

这里是精确源代码的链接：https://github.com/Modernizr/Modernizr/blob/master/feature-detects/video.js - BishopZ

需要注意的是，这个检查是针对受限基线级别3的H.264支持。 - Alex W

Answer 2

我建议您使用类似于http://videojs.com/的工具，它们使用Flash回退，并且它们的语法会为所有浏览器提供正确的格式顺序。如下所示：

<a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
<a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
<a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a>

如果浏览器无法识别MP4格式，它会尝试使用WebM格式，如果还是无法识别，则会尝试使用OGG格式，如果仍然无法识别，它会使用Flash回退。可以将其类比于CSS中的font-family声明。

- leopic

---

这不是完全正确的答案。浏览器确实会检查源文件的类型，如果无法理解，则按顺序尝试下一个源文件（如果您添加了Flash作为备用方案，则可能使用Flash），但您需要考虑视频编解码器。如果您没有明确指定视频类型的编解码器，则可能会发生这种情况，即浏览器知道视频类型但由于不支持编解码器而失败。在这种情况下，浏览器将不会尝试加载下一个源文件。 - Peter Pajchl

只是一个代码示例，用于查看编解码器的标记：<video> <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' /> 不支持视频标签。在<a href="movie.webm">这里</a>下载视频。 <video> - Peter Pajchl