H5检测浏览器视频支持

最新推荐文章于 2021-05-11 20:55:22 发布

敌人-别人家的孩子

最新推荐文章于 2021-05-11 20:55:22 发布

阅读量562

点赞数 1

文章标签： html5 浏览器视频兼容

本文链接：https://blog.csdn.net/jikangjian/article/details/52383895

版权

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

收藏

觉得还不错? 一键收藏
0
评论
H5检测浏览器视频支持

1.检测浏览器视频支持<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>浏览器视频支持检测</title> </head> <body> <h1>HTML 5 视频</h1> <p>检测您的浏览器是否支持 HTML5 视频：</p>
复制链接

扫一扫