H5检测浏览器视频支持

原创 2016年08月31日 12:56:50

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>

HTML5之启动篇-检测浏览器是否支持HTML5与第一个H5程序

通过编写javaScript了解浏览器是否支持HTML5

自定义插件-让IE9以下的浏览器支持H5属性placeholder

自从有了H5让我们喜也让我们忧,新特性用起来很炫、很酷提高了不少工作效率,但有不得不考虑该死的IE浏览器(从此微软的形象一落千丈)。 在H5总我们会使用placeholder属性来实现文本水印提示信息...
  • lxcao
  • lxcao
  • 2016年11月16日 23:07
  • 1328

html5 新特性支持的浏览器检测

try{ document.createElement("canvas").getContext("2d"); document.write("浏览器支持html5 canvas\n");...

html5 新特性支持的浏览器检测

try{ document.createElement("canvas").getContext("2d"); document.write("浏览器支持html5 canvas\n");...

怎么去检测浏览器支不支持html5和css3?

HTML5, CSS3 以及其他相关技术例如 Canvas、WebSocket 等等将 Web 应用开发带到了一个新的高度。...
  • yeana1
  • yeana1
  • 2016年07月04日 14:06
  • 2595

检测浏览器是否支持HTML5/CSS3神器Modernizr

Modernizr 检测是否支持HTML5/CSS3方面适应不同浏览器做不同的变化

如何检测浏览器是否支持HTML5

检测是否支持HTML5的几种常用方法总结

让所有浏览器支持HTML5 video视频标签

http://www.zhangxinxu.com/wordpress/2010/03/%E8%AE%A9%E6%89%80%E6%9C%89%E6%B5%8F%E8%A7%88%E5%99%A8%E...

让所有浏览器支持HTML5 video视频标签

一、前面的唠叨 我记得就是前几个月吧,有条消息说YouTube支持了HTML5视频嵌入标签video,好吧,我听说而已,因为我不是个擅长翻墙的人,到底如何我也不得而知。 与主题不相关的HTML5方...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:H5检测浏览器视频支持
举报原因:
原因补充:

(最多只允许输入30个字)