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标签如下

5、非IE浏览器使用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、倍速播放

// 绑定倍速
        
            0.5x
            1.0x
            1.25x
            1.5x
            2.0x
        
        
            $("#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;
            }
        }

github仓库地址：vlc-video