HTML5视频支持检测

时间2024-01-25 11:14:03发布访客分类HTML浏览387

导读：收集整理的这篇文章主要介绍了html5教程-HTML5视频支持检测，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 PRint?<strong...

收集整理的这篇文章主要介绍了html5教程-HTML5视频支持检测，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

PRint?strong> 现在越来越多的网站都提供视频播放（非插件）。HTML5 提供了展示视频的标准。那么如何检查你得浏览器是否支持视频播放呢，下面我们来写一个列子。/STRONG>

现在越来越多的网站都提供视频播放（非插件）。HTML5 提供了展示视频的标准。那么如何检查你得浏览器是否支持视频播放呢，下面我们来写一个列子。
[html]
!DOCTYPE html PubLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
html XMlns="http://www.w3.org/1999/xhtml">
head>
body>
h1> html 5 视频/h1>
p> 检测您的浏览器是否支持 HTML5 视频：/p>
p id="checkVideoResult" style="margin:10px 0 0 0; border:0; padding:0; ">
button style="font-family:Arial, Helvetica, sans-serif; " onclick="checkVideo()"> Check/button>
/p>
/p>
/body>
/html>

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
html xmlns="http://www.w3.org/1999/xhtml">
head>
body>
h1> HTML 5 视频/h1>
p> 检测您的浏览器是否支持 HTML5 视频：/p>
p id="checkVideoResult" style="margin:10px 0 0 0; border:0; padding:0; ">
button style="font-family:Arial, Helvetica, sans-serif; " onclick="checkVideo()"> Check/button>
/p>
/p>
/body>
/html> 下边是js代码：

[javascript]
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."
    }
}

print?STRONG> 现在越来越多的网站都提供视频播放（非插件）。HTML5 提供了展示视频的标准。那么如何检查你得浏览器是否支持视频播放呢，下面我们来写一个列子。/STRONG>

现在越来越多的网站都提供视频播放（非插件）。HTML5 提供了展示视频的标准。那么如何检查你得浏览器是否支持视频播放呢，下面我们来写一个列子。
[html]
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
html xmlns="http://www.w3.org/1999/xhtml">
head>
body>
h1> HTML 5 视频/h1>
p> 检测您的浏览器是否支持 HTML5 视频：/p>
p id="checkVideoResult" style="margin:10px 0 0 0; border:0; padding:0; ">
button style="font-family:Arial, Helvetica, sans-serif; " onclick="checkVideo()"> Check/button>
/p>
/p>
/body>
/html>

[javascript]
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."
    }
}

觉得可用，就经常来吧！欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

div HTML html5 post-format-gallery

若转载请注明出处： HTML5视频支持检测
本文地址： https://pptw.com/jishu/586453.html

利用html5标签画圆 HTML5 IndexedDB