在项目中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(".1");
if( vlcObj != null ){
vlcInstalled = true
}
} catch (e) {
vlcInstalled= false;
}
return vlcInstalled;
}
//仅适用于52版本以下的firefox浏览器是，并且安装有vlc插件，则返回true；
function isInsalledFFVLC(){
var numPlugins=;
for (i=0;i<numPlugins;i++){
plugin=[i];
if(("VideoLAN") > -1 || ("VLC") > -1){
return true;
}
}
return false;
}
/* 浏览器检测 */
function checkBrowser(){
var browser=
var b_version=
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> 目前我是采用 (“vlc”).playlist == undefined实现判断
playListNodeClick(row){
let vlc = document.getElementById("vlc");
if(!this.isIE){
return
}
if () {
();
}
();
();
();
},
// 确定有录像信息的时候，对控件进行初始化设置
initNoListObject(liveUrl){
this.isIENavigator();
this.isInsalledIEVLC();
if(!liveUrl){
this.$message('直播地址不存在，请确认是否有直播。');
}
if(this.isInstall&&this.isIE){
var vlc = document.getElementById("vlc");
(liveUrl);
();
let timer = setTimeout(() => {
if (!vlc) {
this.initNoListObject();
} else {
("height", 400)
("width", 525)
= 400+"px"
= 525+"px"
// this.doPlay()
(liveUrl);
();
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 {
("height", 400)
("width", 700)
= 400+"px"
= 700+"px"
(this.playListData[0].path);
();
// this.doPlay()
clearTimeout(timer)
}
}, 300);
}
},
//判断是否为ie浏览器
isIENavigator(){
var ie= false;
var userAgent = navigator.userAgent;
// if(=="Microsoft Internet Explorer" ||== "Netscape"){
if((("compatible") > -1 && ("MSIE") > -1)|| (('Trident') > -1 && ("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 ( === 'win32') {
(cmd, ['--version'], function (err, stdout) {
if (err) return console.error(err)
(stdout)
})
} else {
(cmd + ' --version', function (err, stdout) {
if (err) return console.error(err)
(stdout)
})
}
})
如果已经安装成功，则会有以下日志 
如果尚未安装，则会有以下日志 
参考资料来源
VLC Web插件的浏览器兼容性