客户发现上传的视频无法播放，然后主管让我解决这个问题，这个页面不是我负责的，我看了代码，发现视频用的h5标签video标签加载视频。我看了没问题，然后
我先用ie浏览器打开，视频加载没问题。然后我给主管说没问题啊，主管说他也不知道，让我再看看，肯定有问题。然后我让旁边的同事打开，旁边的同事说无法播放。
我看了一下，他原来用的是谷歌浏览器，我才知道video标签原来存在浏览器兼容问题。
我百度了一下，找到了解决办法：
1 <video controls="controls" width="500px" height="300px" preload="metadata"> 2 //火狐 3 <source src="video/FF4.ogv" type="video/ogg"> 4 //谷歌 5 <source src="video/FF4.webm" type="video/webm"> 6 //ie 7 <source src="video/FF4.mp4" type="video/mp4"> 8 </video>
这样就解决兼容问题。
如果还不行加一下这个兼容插件：
<script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script>
但是又有一个新问题出现，ie浏览器会显示三个视频，一个可以播放，另外两个无法播放。
所以这会就要判断用户用的是哪个浏览器了。
1 function isBrowser() { 2 var userAgent = navigator.userAgent; 3 //微信内置浏览器 4 if(userAgent.match(/MicroMessenger/i) == 'MicroMessenger') { 5 return "MicroMessenger"; 6 } 7 //QQ内置浏览器 8 else if(userAgent.match(/QQ/i) == 'QQ') { 9 return "QQ"; 10 } 11 //Chrome 12 else if(userAgent.match(/Chrome/i) == 'Chrome') { 13 return "Chrome"; 14 } 15 //Opera 16 else if(userAgent.match(/Opera/i) == 'Opera') { 17 return "Opera"; 18 } 19 //Firefox 20 else if(userAgent.match(/Firefox/i) == 'Firefox') { 21 return "Firefox"; 22 } 23 //Safari 24 else if(userAgent.match(/Safari/i) == 'Safari') { 25 return "Safari"; 26 } 27 //IE 28 else if(!!window.ActiveXObject || "ActiveXObject" in window) { 29 return "IE"; 30 } 31 else { 32 return "未定义:"+userAgent; 33 } 34 }
在对应的浏览器下播放对应的视频格式就行了。