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;
    }
}

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