vlc+video全瀏覽器兼容視頻播放、倍速播放

一、項目起源

公司項目中需要視頻播放，並且需要實現倍速播放，最重要的是需要兼容IE8，於是乎HTML5的video顯然無法使用，只能另闢蹊徑，查找資料最終決定使用vlc視頻播放插件兼容IE，再加上video，可以實現全瀏覽器兼容的視頻播放和倍速播放。

二、解決思路

首先H5video無法兼容低版本IE，考慮使用ActiveX視頻播放插件，vlc視頻播放軟件有自帶的ActiveX插件，安裝時會自動安裝插件，不過要注意的是vlc的版本必須與IE瀏覽器的版本一致（即如果IE是32位則必須安裝32位vlc）。使用vlc解決IE的視頻播放和倍速播放，其它瀏覽器則使用video實現。

三、解決辦法

1、判斷瀏覽器類型

// 獲取瀏覽器類型
        function getBrowserInfo() {
            var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串 
            var isOpera = userAgent.indexOf("Opera") > -1; //判斷是否Opera瀏覽器 
            var isIE = window.ActiveXObject || "ActiveXObject" in window
            var isEdge = userAgent.indexOf("Edge") > -1; //判斷是否IE的Edge瀏覽器
            var isFF = userAgent.indexOf("Firefox") > -1; //判斷是否Firefox瀏覽器 
            var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判斷是否Safari瀏覽器 
            var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1 && !isEdge; //判斷Chrome瀏覽器 
            if (isIE) {
                var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
                reIE.test(userAgent);
                var fIEVersion = parseFloat(RegExp["$1"]);
                if (userAgent.indexOf('MSIE 6.0') != -1) {
                    return "IE6";
                } else if (fIEVersion == 7) {
                    return "IE7";
                } else if (fIEVersion == 8) {
                    return "IE8";
                } else if (fIEVersion == 9) {
                    return "IE9";
                } else if (fIEVersion == 10) {
                    return "IE10";
                } else if (userAgent.toLowerCase().match(/rv:([\d.]+)\) like gecko/)) {
                    return "IE11";
                } else {
                    return "0"
                } //IE版本過低
            } //isIE end 

            if (isFF) {
                return "FF";
            }
            if (isOpera) {
                return "Opera";
            }
            if (isSafari) {
                return "Safari";
            }
            if (isChrome) {
                return "Chrome";
            }
            if (isEdge) {
                return "Edge";
            }
        }

2、若是IE則判斷是否安裝vlc ActiveX插件

        function isInsalledIEVLC() {
            var vlcObj = null;
            var vlcInstalled = false;
            try {
                vlcObj = new ActiveXObject("VideoLAN.Vlcplugin.2");
                if (vlcObj != null) {
                    vlcInstalled = true
                }
            } catch (e) {
                vlcInstalled = false;
            }
            return vlcInstalled;
        }

3、若未安裝則判斷瀏覽器版本，根據版本下載對應的vlc

        // 獲取瀏覽器32位還是64位，安裝對應的vlc
        function getPlatform() {
            var agent = navigator.platform.toLowerCase();
            if (agent.indexOf("win64") >= 0 || agent.indexOf("wow64") >= 0) {
                return "win64";
            } else if(agent.indexOf("win32") >= 0 || agent.indexOf("wow32") >= 0){
                return "win32";
            }
        }

4、若是IE瀏覽器且已安裝vlc，HTML標籤如下

<embed id="vlcObj" type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" width="100%" height="480" />

5、非IE瀏覽器使用video

        <video id="video" src="" controls width="100%" height="480">
            您的瀏覽器版本太舊，請更新版本或使用其他瀏覽器
        </video>

6、播放和暫停

        var useVlc = getBrowserInfo().indexOf('IE') != -1;
        var VIDEO = document.getElementById("video");
        var VLC = document.getElementById("vlcObj");
        // 播放
        function playVideo(url) {
            if(useVlc){
                url ? VLC.playlist.add(url) : "";
                VLC.playlist.play();
            }else{
                url ? VIDEO.src = url : "";
                VIDEO.networkState != 3 ?  VIDEO.play() : "";
            }
        }

        // 暫停播放
        function zanting() {
            if(useVlc){
                VLC.playlist.pause();
            }else{
                VIDEO.pause();
            }
        }

7、倍速播放

// 綁定倍速
        <select id="beisu">
            <option value="0.5">0.5x</option>
            <option value="1" selected>1.0x</option>
            <option value="1.25">1.25x</option>
            <option value="1.5">1.5x</option>
            <option value="2">2.0x</option>
        </select>
        
            $("#beisu").on("change", function(){
                var v = $(this).val();
                if (useVlc) {
                    VLC.input.rate = v;
                } else {
                    VIDEO.playbackRate = v;
                }
            });

8、快進、快退

        // 快進10秒播放
        function kuaijin() {
            if(useVlc){
                VLC.input.time += 10000;
            }else{
                VIDEO.currentTime += 10;
            }
        }

        // 快退10秒播放
        function kuaitui() {
            if(useVlc){
                VLC.input.time -= 10000;
            }else{
                VIDEO.currentTime -= 10;
            }
        }