1.检测浏览器视频支持
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浏览器视频支持检测</title>
</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>
<video autobuffer autoloop loop controls>
<source src="/media/video.oga">
<source src="/media/video.m4v">
<object type="video/ogg" data="/media/video.oga" width="320" height="240">
<param name="src" value="/media/video.oga">
<param name="autoplay" value="false">
<param name="autoStart" value="0">
<p><a href="/media/video.oga">Download this video file.</a></p>
</object>
</video>
<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>
</html>