vlc+video全浏览器兼容视频播放、倍速播放

1、项目起源

公司项目中须要视频播放，而且须要实现倍速播放，最重要的是须要兼容IE8，因而乎HTML5的video显然没法使用，只能另辟蹊径，查找资料最终决定使用vlc视频播放插件兼容IE，再加上video，能够实现全浏览器兼容的视频播放和倍速播放。

2、解决思路

首先H5video没法兼容低版本IE，考虑使用ActiveX视频播放插件，vlc视频播放软件有自带的ActiveX插件，安装时会自动安装插件，不过要注意的是vlc的版本必须与IE浏览器的版本一致（即若是IE是32位则必须安装32位vlc）。使用vlc解决IE的视频播放和倍速播放，其它浏览器则使用video实现。

3、解决办法

一、判断浏览器类型

// 获取浏览器类型
        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";
            }
        }

二、如果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;
        }

三、若未安装则判断浏览器版本，根据版本下载对应的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";
            }
        }

四、如果IE浏览器且已安装vlc，HTML标签以下

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

五、非IE浏览器使用video

<video id="video" src="" controls width="100%" height="480">
            您的浏览器版本太旧，请更新版本或使用其余浏览器
        </video>

六、播放和暂停

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

七、倍速播放

// 绑定倍速
        <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;
                }
            });

八、快进、快退

// 快进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;
            }
        }

4、完整代码+demo

github仓库地址：vlc-video