H5 video标签视频加载存在的问题

客户发现上传的视频无法播放，然后主管让我解决这个问题，这个页面不是我负责的，我看了代码，发现视频用的h5标签video标签加载视频。我看了没问题，然后

我先用ie浏览器打开，视频加载没问题。然后我给主管说没问题啊，主管说他也不知道，让我再看看，肯定有问题。然后我让旁边的同事打开，旁边的同事说无法播放。

我看了一下，他原来用的是谷歌浏览器，我才知道video标签原来存在浏览器兼容问题。

我百度了一下，找到了解决办法：

 <video controls="controls" width="500px" height="300px" preload="metadata">
             //火狐
             <source src="video/FF4.ogv" type="video/ogg">
             //谷歌
             <source src="video/FF4.webm" type="video/webm">
             //ie
             <source src="video/FF4.mp4" type="video/mp4">
         </video>

这样就解决兼容问题。

如果还不行加一下这个兼容插件：

<script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script>

但是又有一个新问题出现，ie浏览器会显示三个视频，一个可以播放，另外两个无法播放。

所以这会就要判断用户用的是哪个浏览器了。

 function isBrowser() {
     var userAgent = navigator.userAgent;
     //微信内置浏览器
     if(userAgent.match(/MicroMessenger/i) == 'MicroMessenger') {
         return "MicroMessenger";
     }
     //QQ内置浏览器
     else if(userAgent.match(/QQ/i) == 'QQ') {
         return "QQ";
     }
     //Chrome
     else if(userAgent.match(/Chrome/i) == 'Chrome') {
         return "Chrome";
     }
     //Opera
     else if(userAgent.match(/Opera/i) == 'Opera') {
         return "Opera";
     }
     //Firefox
     else if(userAgent.match(/Firefox/i) == 'Firefox') {
         return "Firefox";
     }
     //Safari
     else if(userAgent.match(/Safari/i) == 'Safari') {
         return "Safari";
     }
     //IE
     else if(!!window.ActiveXObject || "ActiveXObject" in window) {
         return "IE";
     }
     else {
         return "未定义:"+userAgent;
     }
 }

在对应的浏览器下播放对应的视频格式就行了。