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

Posted 2023-05-07

【中文标题】如何检测 HTML5 视频标签支持的视频格式？

【英文标题】：How to detect supported video formats for the HTML5 video tag?

【发布时间】：2011-11-19 01:55:46

【问题描述】：

我正在使用视频标签在 html5 中制作应用程序，在应用程序中用户选择一个视频文件并播放该文件。这一切都发生在本地，因为我只链接到用户机器中的那个文件。

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

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

【参考方案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"' );

【讨论】：

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

这里是确切源代码的链接：github.com/Modernizr/Modernizr/blob/master/feature-detects/…

需要注意的是，这会检查Constrained Baseline Level 3 H.264 support。

【参考方案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 声明。

【讨论】：

这不是完全正确的答案。浏览器检查源的类型是正确的，如果他们不理解它，他们会按顺序尝试下一个源（如果您将其添加为后备，则可能使用 flash），但您需要考虑视频 编解码器。如果您没有为视频类型明确指定编解码器，则可能会发生浏览器知道视频 type 但会因为不可用的 codec 支持而失败。在这种情况下，浏览器不会尝试加载下一个源。

只是一个代码示例，可以使用编解码器查看标记：<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"' /> Video tag not supported. Download the video <a href="movie.webm">here</a>. <video>