[原创] vlc视频播放插件使用总结

在项目中web端有视频直播功能，前端实现该功能是使用vlc（2.2.6）插件。

网页插件实现原理
IE浏览器基于Activex插件来实现，非IE浏览器采用NPAPI来实现，非浏览器需要支持NPAPI来实现。
Firefox (版本 52)，Chorme浏览器（版本小于46）开始停止支持除 Adobe Flash 之外的所有 NPAPI 插件
所以在高版本的谷歌浏览器中是无法使用该插件

安装此插件后，html使用如下

<object classid='clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921' width='700' height='400' id='vlc' events='True'>
    <param name='MRL'>             
    <param name='AutoLoop' value='true'>
    <param name='autoPlay' value='true'>
    <param name='Volume' value='50'>
    <param name='StartTime' value='0'>
    <param name='toolbar' value='true'>
    <param name='allowfullscreen' value = 'true'>
</object>

以上各param参数name的含义如下所示：

标签中所需要嵌入的属性有：

Width：指定插件的宽度；

Height：指定插件的高度；

Target、mrl、filename、src：加载的视频源。

标签属性中可选的属性：

Autoplay，autostart：控制视频初试播放的状态，默认值为真（True）；

Allowfullscreen：该属性是从VLC版本的1.2.0开始存在的，指定用户是否可以切换到全屏模式，默认值为真（True）；

Mute：静音控制，指定音频音量是否最初静音，默认值为假（false）；

Loop，autoloop：用来控制视频是否循环播放，默认值为假（false）；

Toolbar：用来控制是否显示工具条，默认值为真（True）；

Bgcolor:用来控制背景颜色，默认值为白色（#000000）。

在实际使用场景中，我们需要对vlc的初始以及浏览器进行判断，如果

• 非IE需要提示该播放功能不支持非IE浏览器

• 没有安装vlc插件，需要给出提示，并提供插件下载地址。

  针对第一种，只需要判断浏览器内核即可
  对第二种，网上有普遍使用的代码，但是放入项目中，却无法判断正确
  网上代码如下所示

 <script type="text/javascript">  
         //仅适用于IE浏览器是，并且安装有vlc插件，则返回true；  
            function isInsalledIEVLC(){    
                var vlcObj = null;  
                var vlcInstalled= false;   
                try {  
                //此处是检测vlc安装的核心，经过亲测，貌似无效，具体原因不详，有可能是使用的版本问题，我目前使用的是2.2.6版本。
                    vlcObj = new ActiveXObject("VideoLAN.Vlcplugin.1");   
                    if( vlcObj != null ){   
                        vlcInstalled = true   
                    }  
                } catch (e) {  
                    vlcInstalled= false;  
                }          
                return vlcInstalled;  
            }   

            //仅适用于52版本以下的firefox浏览器是，并且安装有vlc插件，则返回true；  
            function isInsalledFFVLC(){  
                 var numPlugins=navigator.plugins.length;  
                 for  (i=0;i<numPlugins;i++){   
                      plugin=navigator.plugins[i];  
                      if(plugin.name.indexOf("VideoLAN") > -1 || plugin.name.indexOf("VLC") > -1){   
                         return true;  
                    }  
                 }  
                 return false;  
            }  

                   /* 浏览器检测 */  
            function checkBrowser(){  
                var browser=navigator.appName  
                var b_version=navigator.appVersion  
                var version=parseFloat(b_version)  
                if ( browser=="Netscape"  && version>=4) {  
                    if(isInsalledFFVLC()){  
                        alert("已装VLC插件");  
                    }else{  
                        alert("未装VLC插件");  
                    }  
                }else if(browser=="Microsoft Internet Explorer" && version>=4) {  
                    if(isInsalledIEVLC()){  
                        alert("已装VLC插件");  
                    }else{  
                        alert("未装VLC插件");  
                    }  
                }  
            }  
     </script>  

目前我是采用 document.getElementById(“vlc”).playlist == undefined实现判断

         playListNodeClick(row){
                let vlc = document.getElementById("vlc");
                if(!this.isIE){
                    return
                }
                if (vlc.playlist.isPlaying) {
                    vlc.playlist.stop();
                }
                vlc.playlist.clear();
                vlc.playlist.add(row.path);
                vlc.playlist.play();
            },
            // 确定有录像信息的时候，对控件进行初始化设置
            initNoListObject(liveUrl){
                this.isIENavigator();
                this.isInsalledIEVLC();
                if(!liveUrl){
                  this.$message('直播地址不存在，请确认是否有直播。');
                }
                if(this.isInstall&&this.isIE){
                    var vlc = document.getElementById("vlc");
                    vlc.playlist.add(liveUrl);
                    vlc.playlist.play();
                    let timer = setTimeout(() => {
                        if (!vlc) {
                            this.initNoListObject();
                        } else {
                            vlc.setAttribute("height", 400)
                            vlc.setAttribute("width", 525)
                            vlc.style.height = 400+"px"
                            vlc.style.width = 525+"px"
                            // this.doPlay()
                            vlc.playlist.add(liveUrl);
                            vlc.playlist.play();
                            clearTimeout(timer)
                        }
                    }, 300);
                }
            },
            initObject(obj){
               this.isIENavigator();
               this.isInsalledIEVLC();
               this.$refs.orgComponent.getOrgData()
                var  vlc =  document.getElementById("vlc");
                if(this.isInstall&&this.isIE){
                    let timer = setTimeout(() => {
                    if (!vlc) {
                        this.initObject()
                    } else {
                        vlc.setAttribute("height", 400)
                        vlc.setAttribute("width", 700)
                        vlc.style.height = 400+"px"
                        vlc.style.width = 700+"px"

                        vlc.playlist.add(this.playListData[0].path);
                        vlc.playlist.play();
                        // this.doPlay()
                        clearTimeout(timer)
                    }
                    }, 300);
                }


            },
            //判断是否为ie浏览器
            isIENavigator(){
                var ie=  false;  
                var userAgent = navigator.userAgent;
                // if(navigator.appName=="Microsoft Internet Explorer" ||navigator.appName== "Netscape"){  
                if((userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1)|| (userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1)){
                    ie = true;  
                }else{  
                    ie = false;  
                }
                this.isIE = ie;
            },
             //判断是否安装了VLC插件(IE的VLC插件)  
            isInsalledIEVLC(){
                var vlcObj = null;

                if(document.getElementById("vlc").playlist == undefined){
                    this.isInstall = false;
                }else{
                    this.isInstall = true;
                }
                return this.isInstall

            }  

新增方法

方法二
发现另一种更好用的方法。不过仅限于前后端分离的项目使用。

npm i vlc-command

var cp = require('child_process')
var vlcCommand = require('vlc-command')

vlcCommand(function (err, cmd) {
  if (err) return console.error('could not find vlc command path')

  if (process.platform === 'win32') {
    cp.execFile(cmd, ['--version'], function (err, stdout) {
      if (err) return console.error(err)
      console.log(stdout)
    })
  } else {
    cp.exec(cmd + ' --version', function (err, stdout) {
      if (err) return console.error(err)
      console.log(stdout)
    })
  }
})

如果已经安装成功，则会有以下日志

如果尚未安装，则会有以下日志

参考资料来源
VLC Web插件的浏览器兼容性