我正在使用视频标签在 HTML5 中创建一个应用程序，在应用程序中用户选择一个视频文件并播放该文件。这一切都发生在本地，因为我只链接到用户机器中的那个文件。
我想只允许浏览器可以播放的格式在我的应用程序中播放，并显示不受支持的格式的错误。问题是不同的浏览器可以播放不同的格式。
我知道我可以检查浏览器并将其与我知道它可以播放的格式进行匹配，但是如果浏览器更新以支持另一种格式怎么办？我必须用新信息更新我的应用程序，同时用户将无法播放支持的格式。有没有办法只检查支持的视频格式？
如何检测 HTML5 视频标签支持的视频格式？
IT技术
javascript
html
cross-browser
html5-video
2021-02-26 14:08:49
2个回答
您可以使用 来检查不同视频类型的编解码器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"' );
}
我建议您使用类似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 中的字体系列声明。
其它你可能感兴趣的问题