Javascript 如何检测 HTML5 视频标签支持的视频格式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7451635/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect supported video formats for the HTML5 video tag?
提问by Cokegod
I am making an application in HTML5 using the video tag, in the application the user chooses a video file and I play that file. This all happens locally because I only link to that file in the user's machine.
我正在使用视频标签在 HTML5 中创建一个应用程序，在应用程序中用户选择一个视频文件并播放该文件。这一切都发生在本地，因为我只链接到用户机器中的那个文件。
I want to allow only formats the browser can play to be played in my application, and to show an error for unsupported formats. The problem is that different browsers can play different formats.
我想只允许浏览器可以播放的格式在我的应用程序中播放，并显示不支持格式的错误。问题是不同的浏览器可以播放不同的格式。
I know I can check for the browser and match it with the formats I know it can play, but what if the browser updates to support another format? I'll have to update my application with the new information and meanwhile users won't be able to play supported formats. Is there a way to check just for the supported video formats?
我知道我可以检查浏览器并将其与我知道它可以播放的格式进行匹配，但是如果浏览器更新以支持另一种格式怎么办？我必须用新信息更新我的应用程序，同时用户将无法播放支持的格式。有没有办法只检查支持的视频格式？
回答by Will
You can check codecs for different video types with HTMLVideoElement.prototype.canPlayType. There is also a great HTML5 feature detection library, Modernizr.
您可以使用 来检查不同视频类型的编解码器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"' );
}
回答by leopic
I'd recommend you use something like http://videojs.com/, they use a Flash fallback and their syntax will give you the correct order of the formats that you should use for all browsers.
我建议您使用类似http://videojs.com/ 的东西，它们使用 Flash 回退，它们的语法将为您提供应该用于所有浏览器的格式的正确顺序。
It goes like this:
它是这样的：
<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>
If the browser doesn't understand MP4, it goes to WebM, if it doesn't it goes to OGG, if it doesn't understand it, it goes to the Flash fallback.
如果浏览器不理解 MP4，则转到 WebM，如果不理解，则转到 OGG，如果不理解，则转到 Flash 回退。
Think of it like font-family declarations in CSS.
把它想象成 CSS 中的字体系列声明。
