HTML5 提供了展示視頻的標(biāo)準(zhǔn)。那么如何檢查你的瀏覽器是否支持視頻播放呢,下面與大家分享個(gè)小例子,感興趣的朋友可以了解下
代碼如下:
<STRONG>現(xiàn)在越來(lái)越多的網(wǎng)站都提供視頻播放(非插件)。HTML5 提供了展示視頻的標(biāo)準(zhǔn)。那么如何檢查你得瀏覽器是否支持視頻播放呢,下面我們來(lái)寫(xiě)一個(gè)列子。</STRONG>
代碼如下:
<!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>檢測(cè)您的瀏覽器是否支持 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代碼:
代碼如下:
function checkVideo()
{
if(!!document.createElement('video').canPlayType)
{
//創(chuàng)建video元素
var vidTest=document.createElement("video");
//檢測(cè)是否可以播放ogg格式的視頻
oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
if (!oggTest)
{
//檢測(cè)是否可以播放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."
}
}
代碼如下:
canPlayType方法說(shuō)明:
1.定義:檢測(cè)瀏覽器是否能播放指定的音頻/視頻類(lèi)型。
2.返回值:
"probably" ,表示瀏覽器最可能支持該視頻或音頻。
"maybe" ,表示瀏覽器可能支持該視頻或音頻。
"" (空字符串),表示瀏覽器不支持該視頻或音頻。
注:Internet Explorer 8 以及更早版本不支持該方法。
語(yǔ)法:audio|video.canPlayType(type))
參數(shù)說(shuō)明:
type:要檢測(cè)的音頻或視頻類(lèi)型,
常用值:video/ogg;video/mp4;video/webm; audio/mpeg;audio/ogg;audio/mp4
常用值(包括要檢測(cè)的音頻或視頻編解碼器):
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"