html5
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

html5教程-HTML5视频支持检测

发布时间：2018-12-18 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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." 
    } 
}  

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."
 }
} [html] view plaincopyprint?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" 

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." 
    } 
}  

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."
 }
} [html] view plaincopyprint?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" 

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

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-HTML5视频支持检测全部内容，希望文章能够帮你解决html5教程-HTML5视频支持检测所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：HTML
猜你在找的html5相关文章
其他相关热搜词更多
微信小程序PHPVueVue.jsPythonPython3SQLJSJavaScriptCSSCSS3Web前端C++C语言HTMLJavaTypeScriptes6鸿蒙OS
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新html5教程
热门html5教程