Question

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

虽然较新的IE将正确呈现视频容器，但没有本机.webm支持，浏览器显示“Invalid Source”。

然而，我没有看到的是测试“无效来源”结果的方法，然后能够采取行动。

在一个完美的世界中，我可以预见一些jQuery测试“Invalid Source”，然后显示“你需要WebM for Internet Explorer（链接）！”，但我没有在DOM中找到任何“无效源”测试。

我试图避免使用俗气的老派“这是什么浏览器？”脚本;但即使我这样做，我仍然需要知道是否存在“无效来源”案例。

当IE浏览器没有“WebM for Internet Explorer”插件时，有什么最好的方法（如果存在）测试并对“无效源”结果采取行动？

Answer 1

首先检查是否支持HTML 5视频。如果是，那么你需要检查webm的支持，这不那么简单。测试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    */
}

从这里，您可以加载不同版本的视频，回退到闪存解决方案，或只是显示一条消息，要求用户采取其他路线。

您可以避免自己编写功能检测逻辑，而是使用Modernizr之类的解决方案：

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

如何测试IE和WEBM播放功能？

1 个答案: