如何查看浏览器对html5的支持情况

如何查看浏览器对HTML5的支持情况

想知道你手头的浏览器对HTML5的支持程度如何？方法其实很简单。除了查阅那些官方的标准兼容性表格，还有一个更直观、更省事的办法——直接使用在线的专业检测工具。这类工具能帮你快速生成一份详细的“体检报告”，让你对浏览器的HTML5能力了如指掌。

比如说，你可以打开一个叫 HTML5 Test 的网站（网址是 http://html5test.com/）。进去之后，它会自动运行一系列测试，然后给你的浏览器打个分。分数越高，自然说明支持得越全面、越到位。这比自己去逐一核对上百个功能点要高效多了，非常适合在项目技术选型或者排查兼容性问题时使用。

视频和音频代码检测

当然，如果你是一位开发者，想知道如何在代码层面精准探测浏览器对特定视频、音频格式的支持情况，那也有现成的“武器”。HTML5为 `

它的工作原理不复杂：就是动态创建一个媒体元素，然后去询问它“你能播放这种特定格式的媒体吗？”。浏览器会根据自身的支持情况，返回一个表示可能性程度的字符串，比如“probably”、“maybe”，或者干脆是一个空字符串（表示不支持）。

下面这两段代码就是典型的实战例子，你可以把它们用在你的页面里，来做个实时诊断：

function CheckAudio(){
    var myAudio=document.createElement("audio");
    if(myAudio.canPlayType){
        if(""!=myAudio.canPlayType("audio/mpeg")){
            document.write("你的浏览器支持mp3格式
");
        }
        if(""!=myAudio.canPlayType('audio/ogg;codecs="vorbis"')){
            document.write("你的浏览器支持ogg编码
")
        }
        if(""!=myAudio.canPlayType('audio/mp4;codecs="mp4a.40.5"')){
            document.write("你的浏览器支持aac编码。
");
        }
    }
    else{
        document.write("你的浏览器不不支持检测的音频格式");
    }
}

function checkVideo(){
    var myVideo=document.createElement("video");
    if(myVideo.canPlayType){
        if(""!=myVideo.canPlayType('video/mp4;codecs="a vc1.64001E"')){
            document.write("你的浏览器支持h264格式
");
        }
        if(""!=myVideo.canPlayType('video/ogg;codecs="vp8"')){
            document.write("你的浏览器支持vp8格式
");
        }
        if(""!=myVideo.canPlayType('video/ogg;codecs="theora"')){
            document.write("你的浏览器支持theora格式
");
        }
    }else{
        document.write("你的浏览器不支持要检测的视频格式");
    }
}

运行一下，页面上就会清晰地打印出你的浏览器具体支持哪些音频（如MP3、Ogg Vorbis、AAC）和视频（如H.264、VP8、Theora）编码格式。这相当于把兼容性判断从“凭经验猜”变成了“用数据说话”，能有效避免因为格式问题导致的媒体播放失败，尤其是在开发需要兼容多浏览器环境的多媒体应用时，这个小技巧非常管用。