如何测试IE和WEBM的播放能力？

Question

我有一个 HTML5 页面使用 HTML5 video 标签提供视频内容。内容本身使用 .webm 格式编码，效果很好。当然，Internet Explorer 除外。

虽然较新的 IE 会正确呈现视频容器，但没有原生 .webm 支持，并且浏览器显示 "Invalid Source"。

然而，我没有看到一种方法来测试 "Invalid Source" 结果，然后能够根据它采取行动。

在一个完美的世界中，我可以预见一些 jQuery 测试 "Invalid Source"，然后显示 "You need WebM for Internet Explorer (link)!"，但我没有在 "Invalid Source" 中找到任何 "Invalid Source" =37=] 测试。

我尽量避免使用俗气的老式 "what browser is this?" 脚本；但即使我这样做了，我仍然需要知道是否有 "Invalid Source" 案例。

当 IE 浏览器没有 "WebM for Internet Explorer" 插件时，最好的方法是什么，如果存在的话，测试并根据 "Invalid Source" 结果采取行动在?

Answer 1

你先看看是否支持HTML5视频。如果是，则需要检查对 webm 的支持，后者较少 straight-forward。测试 HTML 5 个视频很简单：

var element = document.createElement( "video" );

if ( element.canPlayType ) {
    /* HTML 5 <video> is supported
}

一旦做到这一点，您就可以使用 canPlayType 方法来确定您的浏览器支持 webm 的可能性：

switch ( element.canPlayType( "video/webm" ) ) {
    case "probably": /* Likely supported */ break;
    case "maybe":    /* Support unknown  */ break;
    case "":         /* Not supported    */
}

从这里您可以加载不同版本的视频，回退到 Flash 解决方案，或者只是显示一条消息，要求用户选择另一条路线。

您可以避免自己编写 feature-detection 逻辑，而是使用像 Modernizr:

这样的解决方案

if ( Modernizr.video ) {
    if ( !Modernizr.video.webm ) {
        /* webm definitely not supported */
    }
}

如何测试IE和WEBM的播放能力？

How to test for IE and WEBM playback capability?

internet-explorer

webm