HTML5影片支援偵測(檢查瀏覽器是否支援影片播放)_html5教學技巧

複製程式碼

程式碼如下:

現在越來越多的網站提供影片播放（非插件）。 HTML5 提供了展示影片的標準。那麼要如何檢查你得瀏覽器是否支援影片播放呢，下面我們就來寫一個列子。

複製程式碼

碼>

HTML 5 影片

偵測您的瀏覽器是否支援HTML5 影片：

Check

下邊是js代碼：

複製代碼

代碼如下:

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.getElementeck ").innerHTML="Well. Some support.";
}
}
}
else
{
document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
}
}

複製代碼

代碼如下: 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"