当前位置:编程学习 > html/css >>

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> 
  <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> 
  </div> 
 </div> 
</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>
  <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>
  </div>
 </div>
</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("checkVideoResul

补充:web前端 , HTML 5 ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,