DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> 檢測浏覽器是否支持html5視頻的代碼
檢測浏覽器是否支持html5視頻的代碼
編輯:HTML5詳解     

在http://www.w3school.com.cn學習Html5的時候,看到一個檢測您的浏覽器是否支持 Html5 視頻的方法:

運行效果:

1.在EditPlus中運行

2.在Chrome浏覽器中運行

=======================================================

代碼部分:

=======================================================

復制代碼代碼如下:
<!DUCTYPE Html>
<Html>
<script type="text/Javascript"> 
function checkVideo()
{
if(!!document.createElement('video').canPlayType)
{
var vidTest=document.createElement("video");
oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
if (!oggTest)
{
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>
<p>檢測您的浏覽器是否支持 Html5 視頻:</p>
<div id="checkVideoResult" style="margin:10px 0 0 0; border:0; padding:0;">
<button onclick="checkVideo()" style="font-family:Arial, Helvetica, sans-serif;">Check</button>
</div>
</body>
</Html>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved