首先判断浏览器是否支持html5,根据以往的经验判断浏览器类型以及版本 这里提供另外一张思路和方法。
创建个html5的特性 看浏览器是否存在 参考w3c
<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>
html代码:
<div id="intro"> <p><strong>许多时髦的网站都提供视频。HTML5 提供了展示视频的标准。</strong></p><p>检测您的浏览器是否支持 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> </div>