[原创] 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.appVersionvar 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插件的浏览器兼容性 <https://www.cnblogs.com/ningheshutong/p/8126606.html>

热门工具换一换