檢測(cè)瀏覽器是否支持html5視頻的代碼_HTML5教程
推薦:Javascript 高級(jí)手勢(shì)使用介紹在IE10中新加入的對(duì)高級(jí)用戶輸入的識(shí)別支持,舉例說明:注冊(cè)一個(gè)點(diǎn)擊操作,通過一句addEventListener 就能夠知道當(dāng)前用戶的點(diǎn)擊是哪種設(shè)備,是手指的點(diǎn)擊,是鼠標(biāo)的單擊還是觸控筆的點(diǎn)擊(平板設(shè)備都會(huì)帶有觸控筆)
在http://www.w3school.com.cn學(xué)習(xí)html5的時(shí)候,看到一個(gè)檢測(cè)您的瀏覽器是否支持 HTML5 視頻的方法:
運(yùn)行效果:
1.在EditPlus中運(yùn)行


2.在chrome瀏覽器中運(yùn)行


=======================================================
代碼部分:
=======================================================
復(fù)制代碼 代碼如下:hl5o.cn
<!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==" {
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>檢測(cè)您的瀏覽器是否支持 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>
分享:關(guān)于HTML5的22個(gè)初級(jí)技巧(圖文教程)HTML5來了.讓我們看一下有什么技巧
相關(guān)HTML5教程:
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網(wǎng)易微博Web App用HTML5開發(fā)的過程介紹
- HTML5 對(duì)各個(gè)標(biāo)簽的定義與規(guī)定:body的介紹
- 關(guān)于HTML5的安全問題開發(fā)人員需要牢記的
- 關(guān)于HTML5的22個(gè)初級(jí)技巧(圖文教程)
- 開發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫的SQL語句的使用方法
- HTML5實(shí)踐-圖片設(shè)置成灰度圖
- HTML5安全介紹之內(nèi)容安全策略(CSP)簡介
- HTML5 Web存儲(chǔ)方式的localStorage和sessionStorage進(jìn)行數(shù)據(jù)本地存儲(chǔ)案例應(yīng)用
- Bootstrap 學(xué)習(xí)分享
- input元素的url類型和email類型簡介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- 在IE6系列等老式瀏覽器中使用HTML5的新標(biāo)簽實(shí)現(xiàn)方案
- 免費(fèi)獲得微軟MCSD證書趕快行動(dòng)吧!
- html5-Canvas可以在web中繪制各種圖形
- 基于HTML5超酷攝像頭(HTML5 webcam)拍照功能實(shí)現(xiàn)代碼
- HTML4和HTML5之間除了相似以外的10個(gè)主要不同
- 突襲HTML5之Javascript API擴(kuò)展5—其他擴(kuò)展(應(yīng)用緩存/服務(wù)端消息/桌面通知)
- html5聲頻audio和視頻video等新特性詳細(xì)說明
- Javascript 高級(jí)手勢(shì)使用介紹
- html5 canvas 畫圖教程案例分析
- 一張圖片能隱含千言萬語之隱藏你的程序代碼
- 相關(guān)鏈接:
- 教程說明:
HTML5教程-檢測(cè)瀏覽器是否支持html5視頻的代碼
。