[原创] 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插件的浏览器兼容性

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页