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

在對應的瀏覽器下播放對應的視頻格式就行了。