您的位置：首页 > Web前端 > HTML5

HTML5视频支持检测(检查浏览器是否支持视频播放)

2013-06-08 10:18 671 查看

<STRONG>现在越来越多的网站都提供视频播放（非插件）。HTML5 提供了展示视频的标准。那么如何检查你得浏览器是否支持视频播放呢，下面我们来写一个列子。</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>检测您的浏览器是否支持 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) 
{ 
//创建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." 
} 
}

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"

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航