关闭

H5检测浏览器视频支持

标签: html5浏览器视频兼容
121人阅读 评论(0) 收藏 举报

1.检测浏览器视频支持

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>浏览器视频支持检测</title>
    </head>
    <body>
        <h1>HTML 5 视频</h1>
        <p>检测您的浏览器是否支持 HTML5 视频:</p>
        <div id="checkVideoResult" style="margin:10px 0 0 0; border:0; padding:0;">
        <button style="font-family:Arial, Helvetica, sans-serif;" onclick="checkVideo()">Check</button>
        <video autobuffer autoloop loop controls>
            <source src="/media/video.oga">
            <source src="/media/video.m4v">
            <object type="video/ogg" data="/media/video.oga" width="320" height="240">
            <param name="src" value="/media/video.oga">
            <param name="autoplay" value="false">
            <param name="autoStart" value="0">
            <p><a href="/media/video.oga">Download this video file.</a></p>
            </object>
        </video>

        <script type="text/javascript">
        /**
            canPlayType方法说明: 
            1.定义:检测浏览器是否能播放指定的音频/视频类型。 
            2.返回值: 
            "probably" ,表示浏览器最可能支持该视频或音频。 
            "maybe" ,表示浏览器可能支持该视频或音频。 
            "" (空字符串),表示浏览器不支持该视频或音频。 
            注:Internet Explorer 8 以及更早版本不支持该方法。 
            语法:audio|video.canPlayType(type)) 
            参数说明: 
            type:要检测的音频或视频类型, 
            常用值:video/ogg;video/mp4;video/webm; audio/mpeg;audio/ogg;audio/mp4 
            常用值(包括要检测的音频或视频编解码器): 
            video/ogg; codecs="theora, vorbis" 
            video/mp4; codecs="avc1.4D401E, mp4a.40.2" 
            video/webm; codecs="vp8.0, vorbis" 
            audio/ogg; codecs="vorbis" 
            audio/mp4; codecs="mp4a.40.5" 
         * */
            function checkVideo() {
                if(!!document.createElement('video').canPlayType) {
                    //创建video元素 
                    var vidTest = document.createElement("video");
                    //检测是否可以播放ogg格式的视频 
                    oggTest = vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
                    if(!oggTest) {
                        //检测是否可以播放MP4格式的视频 
                        h264Test = vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); 
                        if(!h264Test) {
                            document.getElementById("checkVideoResult").innerHTML = "Sorry. No video support."
                        } else {
                            if(h264Test == "probably") {
                                document.getElementById("checkVideoResult").innerHTML = "Yes! Full support!";
                            } else {
                                document.getElementById("checkVideoResult").innerHTML = "Well. Some support.";
                            }
                        }
                    } else {
                        if(oggTest == "probably") {
                            document.getElementById("checkVideoResult").innerHTML = "Yes! Full support!";
                        } else {
                            document.getElementById("checkVideoResult").innerHTML = "Well. Some support.";
                        }
                    }
                } else {
                    document.getElementById("checkVideoResult").innerHTML = "Sorry. No video support."
                }
            }
        </script>
    </body>

</html>
1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1085次
    • 积分:47
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:5篇
    • 译文:0篇
    • 评论:0条
    文章分类