网页中低延迟播放RTSP不二之选—佐罗软件VLC网页播放小程序
本文章PDF版
一、概述
在遍地都是摄像头的今天，往往需要在各种B/S信息化系统中集成视频播放功能，海康、大华、华为等大厂摄像头遵循监控行业标准，一般只支持RTSP传输协议，而Chrome、Firefox、Edge等现代浏览器的主流版本并不支持RTSP流的直接原生播放，在未来也没有计划支持的情况下，想要在网页中实现播放RTSP流，目前常用可选方案有以下3种：
1、先在服务器端把RTSP流转码到浏览器可直接播放的视频流后再提供给终端浏览器播放，这也是号称无插件播放的方法，虽然这种方案对操作系统和浏览器兼容性好，但延迟往往很高，时常达到数秒之久，尤其是首屏画面显示很慢，体验糟糕。实际使用时，由于需要在服务器端搭建一个始终高负荷运转的视频转码转流服务，CPU和内存消耗大，带宽占用大，长期使用成本高，如果摄像头路数比较多或在线播放的终端比较多，服务器的压力就会很大。终端电脑想要持续稳定的看多路、高分辨率或H.265编码视频时，此方案实际使用时常出现卡顿、花屏，播放效果就越差。尤其是在一些非常关键的应用场合，如果不能通过监控视频早一点发现险情并及时排除，可能会无法规避不可承受的风险，也就失去了上视频监控系统的重要意义。网上有号称低延迟的无插件方案，大多也就只适用于单路、低分辨率的H.264编码视频的预览，而视频监控使用场景往往是大屏幕，其基本无实用价值。
2、与第1种方案不同，此方案把服务器端转码过程转移到前端来进行，压力也就转移到了终端电脑之上。因为在主流版本的现代浏览器中，都已经支持WASM(IE除外)，所以可采用此技术在前端实现将RTSP流转码后播放。由于终端电脑的硬件参差不齐，在一些中低配电脑上，就很难获得比较好的播放效果。主要的问题还是受限于WASM的缺陷，只能软解码，无法利用终端电脑的硬件加速能力，而且不支持多线程，这就导致播放多路RTSP流时就非常吃力了，在面对高分辨率和H.265编码的视频流时，同样效果不好，而且大量占用终端电脑的CPU和内存，几乎无法再做其它事情，所以基本无法满足甲方客户的硬性要求。
3、沿用原有插件技术方案，在2015年前Chrome、Firefox等浏览器还可以用NPAPI插件技术的时候，前2种方案的缺陷都不是问题，通过本地原生播放器控件直接播放，服务器也没多少压力，终端也可以充分利用本机硬件加速能力，多路播放时还可利用多线程技术，可以实现比较好的播放效果，成本也较低。缺点就是需要安装插件，实施时在操作系统的兼容性上差一些。此方案如果能解决高版本Chrome等浏览器兼容使用，无疑这是当下能够实现低延迟多路稳定播放的优选技术方案，满足甲方客户硬性播放指标也无压力。
基于当前市场的迫切需要，VLC网页播放小程序应运而生，基于跨浏览器的原生小程序系统-PluginOK中间件开发，通过借助PluginOK中间件提供的内嵌网页运行的独家专利技术，在Chrome等现代浏览器高版本中完全模拟实现了ActiveX控件和NPAPI插件的播放效果，底层调用VLC(是一款自由、开源的跨平台多媒体播放器及框架，可播放大多数多媒体文件，以及 DVD、音频 CD、VCD 及各类流媒体协议)桌面客户端的ActiveX控件实现在网页中低延迟直接播放海康、大华、华为等摄像头的标准RTSP流，由于实际调用的是VLC本地原生播放控件，因此可充分利用本机硬件加速能力实现高效硬解码播放多路、高清和H.265编码视频，大多可支持25路同时播放，可用在Chrome 41、Firefox 50、Edge 80(Chromium内核)、360极速/安全、IE、Oprea 36、QQ等浏览器，也兼容运行于这些浏览器的较高版本。
总的来说，采用VLC网页播放小程序具有如下优点：
1、在支持所有主流版本浏览器的前提下，是当前市场中可实现低延迟(300毫秒)稳定播放的优选技术方案；
2、支持多路同时播放、动态切换播放源，首屏画面显示快、支持回放和抓图，尤其是高分辨率和H.265编码视频，大屏播放体验好；
3、底层播放技术采用VLC的开放源代码方案，播放器后续服务有保障，播放格式兼容好，同时支持H.264和H.265无压力；
4、VLC网页播放小程序额外付费后可获得其源代码进行定制开发，自主可控；
5、支持海康、大华、华为等各厂家的摄像头，只要能提供标准的RTSP流，都可以正常播放；
6、此方案可实现在原有技术体系下的平滑升级，降低了方案大改造带来的技术路线和延期交付风险，可节省大量研发成本；
7、前端集成简单，支持VUE等主流前端框架，无需关心操作系统和浏览器是32位还是64位，一套代码打天下；
8、移动端可直接采用VLC开放源代码的APP来使用，苹果和安卓系统都有对应版本，无需单独开发，投入少见效快。
终端电脑采用VLC网页小程序播放时需部署PluginOK中间件，并搭配VLC网页播放小程序包，还需安装VLC桌面客户端，因此为简化部署过程，可将VLC绿色版程序包文件解压放入中间件绿色版的VLC小程序目录后，再将这些程序文件统一做一MSI或EXE安装包放到B/S服务器上提示用户下载安装或实施工程师统一部署。一般来说，需要看视频监控的地方基本上集中于监控室，电脑数量有限，只需安装一个程序包即可完成部署，还是很简单的。之后借助PluginOK中间件的在线升级机制，还可彻底解决传统客户端软件升级维护的难题，一箭双雕。
一个好的技术实施方案，首先是要满足甲方客户的刚性需求，其次是要尽量降低采购、开发、实施及维护的总成本，再次是需要有良好的兼容性、稳定性和易用性，而且还需尽可能做到技术方案不能因为浏览器的升级而失效，如还能实现一些自主可控的要求那就更好了。VLC网页播放小程序正好提供了这样一个稳定可靠、兼容性好、低延迟又可同时播放多路RTSP的低成本半开源技术方案，无疑是当前安防行业在网页端低延迟播放RTSP流的优先选择。
二、在线体验
打开本公司的在线测试网页http://local.zorrosoft.com/，点击网络高级版安装包(http://local.zorrosoft.com/Files/PluginOK.zip)下载，或直接在浏览器中访问http://zorrosoft.com/Files/WRL.zip下载这个绿色版程序包，成功后解压并执行安装(绿色版执行InstallWrl.bat)即可完成PluginOK中间件的安装。一般来说，此安装包已经默认内置了2个不同PID的VLC网页播放小程序的程序包，分别演示不同播放配置情况下的播放效果。双击打开安装后程序目录Test子目录的VlcFrame.html网页，点击连接后再点击发送，即可尝试启动VLC网页播放小程序体验。如提示还未授权，请在测试网页中点击连接后复制粘贴以下内容：{“req”:”Wrl_Version”, “rid”:1,”para”:{“Mac” : 0,”More” : 0,”Config” : 1,”Router” : 0,”IP” : 1}} 到输入框中后点击执行，以便获取到测试电脑的UniID，如下图所示：
如有需要，在启动播放发送的命令中，可以通过修改ShowType值(分屏风格)，或修改Open参数，就是您需要播放的RTSP流地址，必要时请先进行UrlEncode编码。然后加上贵公司名称和联系人姓名及电话，再通过加微信ZorroSoft或扫描以下企业微信提交给客服人员，申请开通试用授权，一般很快会获得批准。
在线体验播放效果如下图所示：
如启动播放后没有画面，浏览器自动切换到新标签页并打开了VLC的官方网站，就代表你的电脑上还未安装VLC桌面客户端程序，就先从VLC官方网站下载对应版本并安装，需要确保安装的VLC是3.0及以上的版本。
VLC网页播放小程序至少支持在Windows XP系统中使用，在当前主流的Windows 10和较高的11版本也可以正常播放，Linux等系统的信创版也在路上。其浏览器兼容性如下：
1、IE 8及以上版本；
2、Chrome 41及以上版本；
3、FireFox 50及以上版本；
4、Opera 36及以上版本；
5、Edge(Chrome内核) 80及以上版本；
6、360极速浏览器 9.5及以上版本；
7、360(企业)安全浏览器；
8、QQ浏览器10及以上版本；
9、搜狗浏览器…
如您另有特殊需求，也可以付费定制支持需要支持的专有浏览器适配版本。
一、个性化配置
找到PluginOK中间件程序的运行目录，其子目录下的VLC网页播放小程序配置文件Plugins\90FC7E0E-0D2F-4C38-9875-B06407CE4556\Config.json，可用记事本打开编辑，主要内容如下：
{“COM”: “axvlc.dll”,”Caching”:300,”RTSPTCP”:1,”ToolBar”:0,”FillWnd”:0,”PORT”: 930}
其中COM是为打包VLC绿色版后安装中间件时需要自动注册的COM组件准备的。ToolBar设置播放画面中是否显示控制播放的工具栏，FillWnd设置播放画面是否充满整个窗口区(设置为1时充满窗口，这可能会导致画面拉伸)，PORT设置播放小程序的Web Socket服务侦听默认端口，前端在请求连接到播放小程序端口时，不能写死这个值，因为可能启动多个实例，不同实例会采用不一样的端口进行侦听。前端在连接到中间件端口启动播放小程序的过程中，收到以下的JSON包中解析Port值，就是实际侦听端口。
{“event”:”Wrl_AppletOK”,”aid”:4,”rid”:4,”data”:{“SID”:”221903″,”PID”:”90FC7E0E-0D2F-4C38-9875-B06407CE4556″,”Port”:930}}
其中aid为当前播放小程序的实例ID，前端可通过此ID对其进行各种控制，比如显示、隐藏、放大缩小播放窗口、滚动等等。
Caching设置网络缓存，控制播放延迟的关键配置，单位毫秒，不建议设置太低，尤其是您的电脑配置或网络状态不太好的情况下，如遇到播放画面停滞，就需要适当调大这个值比如500毫秒后保存再启动播放看效果。在甲方客户现场实际实施时，可进行针对性的测试，找到一个可正常播放又能保证尽量低延迟的数值。RTSPTCP配置Live555流传输采用HTTP还是TCP方式，1为TCP方式，0为HTTP方式，如遇无法播放情况，请先检查播放源是否正常，另外就是调整此参数进行测试。关于检查播放源是否正常或调优播放效果，常见做法就是直接启动VLC桌面客户端进行播放测试。以上这些播放参数只是默认值，也可在启动播放小程序后，再调用对应接口设置其它值来控制播放行为，通过接口调用的参数只在当时生效，不会修改默认配置中的数值。
在VLC桌面客户端主界面，点击媒体菜单->打开网络串流，弹出以下画面：
输入RTSP流地址，并点击显示更多选项，修改缓存的数值后确认即可播放。
在工具菜单中点击偏好设置，切换到如下界面，配置Live555流传输方式：
只要在VLC桌面客户端验证你的RTSP流能够稳定低延迟播放出来，那么在VLC网页播放小程序中播放也毫无问题，需要做的就是配置好播放参数。
一、开发集成
在测试网页中播放正常的情况下，可以尝试把其中的播放代码，迁移到自己的前端网页中。本身对前端并无特殊要求，支持VUE等常用前端框架，只需要常用的JS脚本处理即可，通信采用HTML5中的国际标准技术Web Socket，数据包采用JSON打包。由于PluginOK中间件已经抽象处理了各种浏览器的兼容问题，所以前端调用起来就非常方便了，除了在IE浏览器中需要调用PluginOK中间件提供的Web Socket连接ActiveX控件之外，其它都是一样的。测试网页中需要手工点击连接，编辑启动参数后，再点击发送才可启动播放窗口，而在实际的B/S项目中，是不可能让用户这样操作的，所以前端需要把点击连接和发送这两个手工执行的过程，通过编写JS脚本代码自动执行，从而可实现网页加载后自动播放。具体可查看测试网页中开源的JS代码和HTML网页中的写法。集成大体上有以下几步：
- 编写HTML网页，嵌入VLC网页播放小程序需要的代码：
A、标记小程序的显示位置和大小
.VLCApplet {
margin: 20px 0 0 20px;
width: 480px;
height: 320px;
border: 1px solid blue;
}
或者
.VLCApplet {
width: 480px;
height: 320px;
top: 20px;
left: 20px;
border: 1px solid blue;
}
如果在网页Header区没有标记小程序初始显示位置和大小，请在启动小程序的JSON参数里，添加以下参数：
“Left”:20,”Top”:20,”Width”:480,”Height”:320
B、网页中嵌入元素
支持IFrame的：
或者直接用
C、在HTML网页中加入PluginOK的脚本
此脚本主要实现Web Socket
此脚本中有一些测试网页的元素处理，可以自行删除。主要实现收发Web Socket包并进行对应处理。
- 前端请求连接到PluginOK中间件的默认侦听端口，就是测试网页中需要手工点击连接的功能，成功后发送类似以下的JSON包：
{“req”:”Wrl_VLCApplet”,”rid”:4,”para”:{“Type”:”0″,”Title”:”VLC多媒体播放小程序”,”Flag”:2,”Left”:20,”Top”:20,”Width”:480,”Height”:320,”IframeX”:0,”IframeY”:210,”BarW”:0,”BarH”:0,”ScrollTop”:0,”Url”: “http://zorrosoft.com/VlcFrame.html”,”ShowType”:3,”Open”:”rtsp://wzh:test123456@192.168.1.8:554/h264/ch1/main/av_stream”}}
说明如下：
Type为浏览器类型，传0自动判断(前提是当前浏览器已启动并显示在前端，Flag指定当前页加载时必须是0) 可强制指定浏览器类型Type(1代表IE 2代表Chrome 4代表Firefox 8代表Opera 16代表Edge(Chromium内核) 32代表360极速浏览器 33代表360安全浏览器 34代表360企业安全浏览器 50代表QQ浏览器 60代表搜狗浏览器)
Title：网页标题中的关键词，当正常方式无法获取播放网页窗口时匹配对应标题的网页
Flag掩码标记：1指定新标签加载(1和16都不指定时为当前页加载) 2小程序显示窗口边框 4不自动裁剪越界窗口 8自动适配网页高度和宽度显示 512不检查同一网页启动同一个小程序
IframeX和IframeY分别为iframe嵌套的横竖偏移修正坐标
BarW和BarH分别是网页右侧和底部预留区域，ScrollTop为顶部滚动预留高度
小程序实际显示首先会基于网页中指定的坐标和大小，再根据IframeX、IframeY、BarW、BarH设定的值做修正
ShowType 播放窗口分屏类型，默认1只显示一个播放窗口，支持1-21 24 25等多达20种多窗口播放。
Url：加载小程序所在的网页实际地址，可在这个网页中配置播放多个源或配置播放窗口的大小和位置，PluginOK中间件在得到启动指令后会自动获取此网页中的配置参数进行播放，需要指向静态网页，无法获取动态配置的内容。
Open ：启动后自动播放的流地址或本地多媒体文件路径，斜杠\替换成/再传
注意：Open和Url如果有特殊字符= & 双引号或中文等，需要用URL编码处理后传递。
需要注意的是，在需要继续播放的情况下，到中间件的此WS连接是不能释放的，否则会导致播放窗口消失。
3、前端脚本处理
启动后会前后收到三个JSON数据包
A、{“ret”:0,”rid”:1,”data”:{“ID”:2}} 代表小程序实例化开始，返回的ID是实例化ID，可通过这个ID对其进行相关控制
B、{“event”:”Wrl_Listen”,”aid”:2,”data”:{“SID”:”123″,”PID”:”90FC7E0E-0D2F-4C38-9875-B06407CE4556″,”port”:935}}
代表小程序WS侦听服务就绪。返回的侦听端口，可再建立一个Web Socket连接后，调用小程序自身实现的相关功能，比如重新指定播放源，暂停播放，抓图等。
C、
{“event”:”Wrl_AppletOK”,”aid”:2,”rid”:4,”data”:{“SID”:”123″,”PID”:”90FC7E0E-0D2F-4C38-9875-B06407CE4556″,”Port”:935}}
代表小程序创建成功，返回ID为当前小程序运行ID，通过此ID，可执行Wrl_AppletControl、Wrl_AppletScroll、Wrl_AppletResize等命令。举例如下：
1)、请求控制VLC多媒体播放网页小程序：
当前端不再需要小程序时可指定关闭，或者显示/隐藏及全屏显示等
ID为Wrl_VLCApplet启动小程序时返回的ID值，Code代表控制类型掩码：1关闭 2全屏显示 4自动隐藏 8还原显示 16自动适配网页高度和宽度显示模式切换 32强制隐藏。其中全屏显示2，可直接通过热键ESC或取消,设置4和32隐藏后可通过8恢复显示
{“req”:”Wrl_AppletControl”,”rid”:2,”para”:{“ID”:”1″,”Code”:4}}
2)、请求滚动VLC多媒体播放网页小程序：
当前端截取到网页滚动通知时，需要调用此接口实现小程序和网页的滚动联动
ID为启动小程序时返回JSON中的ID值
Code为滚动方向1是水平直，2是垂直，3是同时
Left为横向滚动条位置，Top为纵向滚动条位置
{“req”:”Wrl_AppletScroll”,”rid”:3,”para”:{“ID”:”1″,”Code”:2,”Left”:0,”Top”:100}}
3)、请求改变VLC多媒体播放网页小程序显示位置或大小：
当前端网页显示区域缩放时，可动态修改小程序的显示位置或大小
ID为Wrl_VLCApplet启动小程序时返回的ID值，Width和Height分别为新的宽度和高度
X和Y分别为新的显示位置，不指定时保持不变，指定时原设置的IframeX和IframeY失效
{“req”:”Wrl_AppletResize”,”rid”:4,”para”:{“ID”:1,”Width”:500,”Height”:600}}
或，同时修改小程序显示起始坐标
{“req”:”Wrl_AppletResize”,”rid”:5,”para”:{“ID”:1,”Width”:500,”Height”:600,”X”:20,”Y”:20}}
4)、请求设置网页预留右侧宽度和底部高度，滚动条信息、垂直滚动及水平滚动位置：
当小程序显示区域超过当前网页时，需去除滚动条的显示影响
ID为启动小程序时返回的ID值，BarW为预留右侧宽度 BarH为预留底部高度
Code 1代表有水平滚动条，2代表有垂直滚动条，3代表都有
ScrollTop垂直滚动条位置 ScrollTop水平滚动条位置
{“req”:”Wrl_ScrollBar”,”rid”:6,”para”:{“ID”:”1″,”Code”:2,”BarW”:0,”BarH”:0,”ScrollTop”:0,”ScrollLeft”:0}}
5)、请求对小程序窗口做Alpha透明处理，便于前端临时显示覆盖到小程序窗口的菜单等：
ID为Wrl_VLCApplet启动小程序时返回的ID值，Alpha为透明度百分比，1-100
{“req”:”Wrl_AppletAlpha”,”rid”:7,”para”:{“ID”:1,”Alpha”:30}}
6)、请求对小程序窗口内容进行截图：
ID为启动小程序时返回JSON中的ID值，
File为指定截图文件保存路径或扩展名
Base64指定为1时代表返回BASE64编码的图像内容
{“req”:”Wrl_AppletSnap”,”rid”:10,”para”:{“ID”:1,”Base64″:1,”File”:”.png”}}
7)、请求缩放内嵌网页小程序，用于浏览器网页按比例缩放，一般不需要处理：
ID为启动小程序时返回JSON中的ID值，Scall为缩放百分比
{“req”:”Wrl_AppletScale”,”rid”:11,”para”:{“ID”:1,”Scale”:120}}
4、请求VLC网页播放小程序功能
在第3步中得到VLC网页播放小程序的实际侦听端口后，新建一个WS连接过去，成功后，就可以请求VLC的ActiveX控件提供的功能，截获其事件通知了。可以请求的功能列表如下：
4.1、ActiveX接口功能请求：
支持创建多个VLC的ActiveX控件窗口同时播放多路实时视频，所以请求参数里需要指定窗口序号ID，从1开始，序号原则是从左向右开始编号，然后从上到下开始顺序编号，如遇右侧多层排列窗口时，直到右侧窗口序号排序完成。
1) 取指定ID播放窗口属性AutoLoop(自动循环)值，举例：
请求：{“req”:”VLC_GetAutoLoop”,”rid”:41,”para”:[{“ID”:1},{“ID”:2}]}
分别返回：{“ret”:0,”rid”:41,”ID”:1,”data”:{“Ret”:0,”AutoLoop”:0}} 和 {“ret”:0,”rid”:41,”ID”:2,”data”:{“Ret”:0,”AutoLoop”:0}}
ret为请求返回值，0正常，非零不正常，不正常时请取和ret同级的错误描述err,下同
Ret为调用ActiveX对应函数返回值，0代表正常
2) 设置指定ID控件窗口AutoLoop(自动循环)值，举例：
请求：
{“req”:”VLC_PutAutoLoop”,”rid”:42,”para”:[{“ID”:1,”AutoLoop”:1},{“ID”:2,”AutoLoop”:0}]}
分别返回：{“ret”:0,”rid”:42,”ID”:1,”data”:{“Ret”:0}} 和
{“ret”:0,”rid”:42,”ID”:2,”data”:{“Ret”:0}}
3) 取指定ID控件窗口AutoPlay(自动播放)值，举例：
请求：{“req”:”VLC_GetAutoPlay”,”rid”:43,”para”:[{“ID”:1},{“ID”:2}]}
分别返回：{“ret”:0,”rid”:43,”ID”:1,”data”:{“Ret”:0,”AutoPlay”:0}} 和 {“ret”:0,”rid”:43,”ID”:2,”data”:{“Ret”:0,”AutoPlay”:0}}
4) 设置指定ID窗口AutoPlay(自动播放)值，举例：
请求：
{“req”:”VLC_PutAutoPlay”,”rid”:44,”para”:[{“ID”:1,”AutoPlay”:1},{“ID”:2,”AutoPlay”:0}]}
分别返回：{“ret”:0,”rid”:44,”ID”:1,”data”:{“Ret”:0}} 和
{“ret”:0,”rid”:44,”ID”:2,”data”:{“Ret”:0}}
5) 取指定ID窗口StartTime(开始时间)值，举例：
请求：{“req”:”VLC_GetStartTime”,”rid”:45,”para”:[{“ID”:1},{“ID”:2}]}
分别返回：{“ret”:0,”rid”:45,”ID”:1,”data”:{“Ret”:0,”StartTime”:0}} 和 {“ret”:0,”rid”:45,”ID”:2,”data”:{“Ret”:0,”StartTime”:0}}
6) 设置指定ID窗口StartTime(开始时间)值，举例：
请求：
{“req”:”VLC_PutStartTime”,”rid”:46,”para”:[{“ID”:1,”StartTime”:0},{“ID”:2,”StartTime”:0}]}
分别返回：{“ret”:0,”rid”:46,”ID”:1,”data”:{“Ret”:0}} 和
{“ret”:0,”rid”:46,”ID”:2,”data”:{“Ret”:0}}
7) 取指定ID窗口MRL(播放源)值，举例：
请求：{“req”:”VLC_GetMRL”,”rid”:47,”para”:[{“ID”:1},{“ID”:2}]}
分别返回：{“ret”:0,”rid”:47,”ID”:1,”data”:{“Ret”:0,”MRL”:””}} 和 {“ret”:0,”rid”:47,”ID”:2,”data”:{“Ret”:0,”MRL”:””}}
8) 设置指定ID窗口MRL(播放源)值，举例：
请求：
{“req”:”VLC_PutMRL”,”rid”:48,”para”:[{“ID”:1,”MRL”:”rtsp://wzh:test123456@192.168.1.8:554/h264/ch1/main/av_stream”},{“ID”:2,”MRL”:”rtsp://wzh:test123456@192.168.1.8:554/h264/ch1/main/av_stream”}]}
分别返回：{“ret”:0,”rid”:48,”ID”:1,”data”:{“Ret”:0}} 和
{“ret”:0,”rid”:48,”ID”:2,”data”:{“Ret”:0}}
9) 取指定ID窗口Visible(可见性)，举例：
请求：{“req”:”VLC_GetVisible”,”rid”:49,”para”:[{“ID”:1},{“ID”:2}]}
分别返回：{“ret”:0,”rid”:49,”ID”:1,”data”:{“Ret”:0,”Visible”:1}} 和 {“ret”:0,”rid”:49,”ID”:2,”data”:{“Ret”:0,”Visible”:0}}
10) 设置指定ID窗口Visible(可见性)，举例：
请求：
{“req”:”VLC_PutVisible”,”rid”:48,”para”:[{“ID”:1,”Visible”:1},{“ID”:2,”Visible”:0}]}
分别返回：{“ret”:0,”rid”:50,”ID”:1,”data”:{“Ret”:0}} 和
{“ret”:0,”rid”:50,”ID”:2,”data”:{“Ret”:0}}
11) 取指定ID窗口Volume(音量)，举例：
请求：{“req”:”VLC_GetVolume”,”rid”:51,”para”:[{“ID”:1},{“ID”:2}]}
分别返回：{“ret”:0,”rid”:51,”ID”:1,”data”:{“Ret”:0,”Volume”:0}} 和 {“ret”:0,”rid”:51,”ID”:2,”data”:{“Ret”:0,”Volume”:0}}
12) 设置指定ID窗口Volume(音量)，举例：
请求：
{“req”:”VLC_PutVolume”,”rid”:52,”para”:[{“ID”:1,”Volume”:0},{“ID”:2,”Volume”:0}]}
分别返回：{“ret”:0,”rid”:52,”ID”:1,”data”:{“Ret”:0}} 和
{“ret”:0,”rid”:52,”ID”:2,”data”:{“Ret”:0}}
13) 取指定ID窗口BackColor(背景色)，举例：
请求：{“req”:”VLC_GetBackColor”,”rid”:53,”para”:[{“ID”:1},{“ID”:2}]}
分别返回：{“ret”:0,”rid”:53,”ID”:1,”data”:{“Ret”:0,”BackColor”:0}} 和 {“ret”:0,”rid”:53,”ID”:2,”data”:{“Ret”:0,”BackColor”:0}}
14) 设置指定ID窗口BackColor(背景色)，举例：
请求：
{“req”:”VLC_PutBackColor”,”rid”:54,”para”:[{“ID”:1,”BackColor”:0},{“ID”:2,”BackColor”:0}]}
分别返回：{“ret”:0,”rid”:54,”ID”:1,”data”:{“Ret”:0}} 和
{“ret”:0,”rid”:54,”ID”:2,”data”:{“Ret”:0}}
15) 取指定ID窗口Toolbar(工具栏)显示与否，举例：
请求：{“req”:”VLC_GetToolbar”,”rid”:55,”para”:[{“ID”:1},{“ID”:2}]}
分别返回：{“ret”:0,”rid”:55,”ID”:1,”data”:{“Ret”:0,”Toolbar”:0}} 和 {“ret”:0,”rid”:55,”ID”:2,”data”:{“Ret”:0,”Toolbar”:0}}
16) 设置指定ID窗口Toolbar(工具栏)显示与否，举例：
请求：
{“req”:”VLC_PutToolbar”,”rid”:56,”para”:[{“ID”:1,”Toolbar”:0},{“ID”:2,”Toolbar”:0}]}
分别返回：{“ret”:0,”rid”:56,”ID”:1,”data”:{“Ret”:0}} 和
{“ret”:0,”rid”:56,”ID”:2,”data”:{“Ret”:0}}
17) 取指定ID窗口FullScreenEnabled(全屏启用)，举例：
请求：
{“req”:”VLC_GetFullScreenEnabled”,”rid”:57,”para”:[{“ID”:1},{“ID”:2}]}
分别返回：
{“ret”:0,”rid”:57,”ID”:1,”data”:{“Ret”:0,”FullScreenEnabled”:0}} 和 {“ret”:0,”rid”:57,”ID”:2,”data”:{“Ret”:0,”FullScreenEnabled”:0}}
18) 设置指定ID窗口FullScreenEnabled(全屏启用)，举例：
请求：
{“req”:”VLC_PutFullScreenEnabled”,”rid”:58,”para”:[{“ID”:1,”FullScreenEnabled”:0},{“ID”:2,”FullScreenEnabled”:0}]}
分别返回：{“ret”:0,”rid”:58,”ID”:1,”data”:{“Ret”:0}} 和
{“ret”:0,”rid”:58,”ID”:2,”data”:{“Ret”:0}}
19) 取指定ID窗口版本信息，举例：
请求：{“req”:”VLC_GetVersionInfo”,”rid”:59,”para”:[{“ID”:1},{“ID”:2}]}
分别返回：{“ret”:0,”rid”:59,”ID”:1,”data”:{“Ret”:0,”VersionInfo”:””}} 和 {“ret”:0,”rid”:59,”ID”:2,”data”:{“Ret”:0,”VersionInfo”:””}}
20) 取指定ID窗口多媒体描述信息，举例：
请求：{“req”:”VLC_MediaDescGet”,”rid”:60,”para”:[{“ID”:1},{“ID”:2}]}
分别返回：
{“ret”:0,”rid”:60,”ID”:1,”data”:{“Ret”:0,”Title”:””,”Artist”:””,”Genre”:””,”Copyright”:””,”Album”:””,”TrackNumber”:””,”Desc”:””,”Rating”:””,”Date”:””,”Setting”:””,”Url”:””,”Language”:””,”NowPlaying”:””,”Publisher”:””,”EncodedBy”:””,”ArtworkURL”:””,”TrackID”:””}} 和
{“ret”:0,”rid”:60,”ID”:2,”data”:{“Ret”:0,”Title”:””,”Artist”:””,”Genre”:””,”Copyright”:””,”Album”:””,”TrackNumber”:””,”Desc”:””,”Rating”:””,”Date”:””,”Setting”:””,”Url”:””,”Language”:””,”NowPlaying”:””,”Publisher”:””,”EncodedBy”:””,”ArtworkURL”:””,”TrackID”:””}}
21) 取指定ID窗口音频信息，举例：
取时自动获得全部属性
请求：{“req”:”VLC_AudioGet”,”rid”:61,”para”:[{“ID”:1},{“ID”:2}]}
分别返回：
{“ret”:0,”rid”:61,”ID”:1,”data”:{“Ret”:0,”Mute”:0,”Volume”:100,”Track”:””,”TrackNumber”:””,”Channel”:””,”Desc”:””}} 和
{“ret”:0,”rid”:61,”ID”:2,”data”:{“Ret”:0,”Mute”:””,”Volume”:””,”Track”:””,”TrackNumber”:””,”Channel”:””,”Desc”:””}}
22) 设置指定ID窗口音频信息，举例：
设置时不要求全部属性，只设置需要设置的
请求：
{“req”:”VLC_AudioPut”,”rid”:62,”para”:[{“ID”:1,”Mute”:0,”Volume”:100,”Track”:””,”TrackNumber”:””,”Channel”:””,”Desc”:””},{“ID”:2,”Mute”:””,”Volume”:””}]}
分别返回：{“ret”:0,”rid”:62,”ID”:1,”data”:{“Ret”:0}} 和
{“ret”:0,”rid”:62,”ID”:2,”data”:{“Ret”:0}}
23) 取指定ID窗口播放信息，举例：
取时自动获得全部属性
请求：{“req”:”VLC_GetPlay”,”rid”:63,”para”:[{“ID”:1},{“ID”:2}]}
分别返回：
{“ret”:0,”rid”:63,”ID”:1,”data”:{“Ret”:0,”IsPlay”:1,”ItemCount”:3,”CurrentItem”:1}} 和
{“ret”:0,”rid”:63,”ID”:2,”data”:{“Ret”:0,”IsPlay”:1,”ItemCount”:5,”CurrentItem”:2}}
24) 指定ID窗口添加播放内容，举例：
Uri需要进行UrlEncode编码，Option可不设置用缺省值
请求：
{“req”:”VLC_AddPlay”,”rid”:64,”para”:[{“ID”:1,”Uri”:”rtsp://wzh:test123456@192.168.1.8:554/h264/ch1/main/av_stream”,”Name”:”test”,”Option”:”:network-caching=300″},{“ID”:2,”Uri”:”rtsp://wzh:test123456@192.168.1.8:554/h264/ch1/main/av_stream”,”Name”:”test”,”Option”:”:rtsp-tcp”}]}
分别返回：{“ret”:0,”rid”:64,”ID”:1,”data”:{“Ret”:0,”Item”:1}} 和
{“ret”:0,”rid”:64,”ID”:2,”data”:{“Ret”:0,”Item”:2}}
25) 指定ID窗口播放(指定多媒体)，举例：
ItemId是序号，可缺省
请求：{“req”:”VLC_Play”,”rid”:65,”para”:[{“ID”:1,”ItemId”:1},{“ID”:2}]}
分别返回：{“ret”:0,”rid”:65,”ID”:1,”data”:{“Ret”:0}} 和
{“ret”:0,”rid”:65,”ID”:2,”data”:{“Ret”:0}}
26) 控制指定ID窗口播放器，举例：
Type可以是这些值：
Pause,Play,Stop,StopAsync,Next,Prev,Clear,TogglePause
请求：
{“req”:”VLC_Control”,”rid”:66,”para”:[{“ID”:1,”Type”:”Pause”},{“ID”:2,”Type”:”Play”}]}
分别返回：{“ret”:0,”rid”:66,”ID”:1,”data”:{“Ret”:0}} 和
{“ret”:0,”rid”:66,”ID”:2,”data”:{“Ret”:0}}
27) 指定ID窗口移除多媒体内容，举例：
ItemId是当前已存在的序号
请求：
{“req”:”VLC_RemoveItem”,”rid”:67,”para”:[{“ID”:1,”ItemId”:1},{“ID”:2,”ItemId”:2}]}
分别返回：{“ret”:0,”rid”:67,”ID”:1,”data”:{“Ret”:0}} 和
{“ret”:0,”rid”:67,”ID”:2,”data”:{“Ret”:0}}
28) 指定ID窗口解析选项，举例：
请求：
{“req”:”VLC_Parse”,”rid”:68,”para”:[{“ID”:1,”Option”:””,”Timeout”:0},{“ID”:2,,”Option”:””,”Timeout”:0}]}
分别返回：{“ret”:0,”rid”:68,”ID”:1,”data”:{“Ret”:0,”Status”:0}} 和
{“ret”:0,”rid”:68,”ID”:2,”data”:{“Ret”:0,”Status”:0}}
29) 取指定ID窗口SubTitle信息，举例：
NameID指定时获取描述信息
请求：
{“req”:”VLC_GetSubTitle”,”rid”:69,”para”:[{“ID”:1,”NameID”:0},{“ID”:2}]}
分别返回：
{“ret”:0,”rid”:69,”ID”:1,”data”:{“Ret”:0,”Spu”:1,”SpuNumber”:0,”Desc”:””}} 和 {“ret”:0,”rid”:69,”ID”:2,”data”:{“Ret”:0,”Spu”:1,”SpuNumber”:0}}
30) 设置指定ID窗口SubTitleSpu，举例：
请求：
{“req”:”VLC_PutSubTitle”,”rid”:70,”para”:[{“ID”:1,”Spu”:0},{“ID”:2,”Spu”:0}]}
分别返回：{“ret”:0,”rid”:70,”ID”:1,”data”:{“Ret”:0}} 和
{“ret”:0,”rid”:70,”ID”:2,”data”:{“Ret”:0}}
31) 取指定ID窗口视频信息，举例：
TrackID指定时获取描述信息
请求：
{“req”:”VLC_VideoGet”,”rid”:71,”para”:[{“ID”:1,”TrackID”:1},{“ID”:2}]}
分别返回：
{“ret”:0,”rid”:71,”ID”:1,”data”:{“Ret”:0,”FullScreent”:0,”Width”:0,”Height”:0,”SubTitle”:0,”Track”:0,”TrackCount”:0,”TeleText”:0,”Scale”:100,”AspectRatio”:””,”Crop”:””,”Desc”:””}} 和 {“ret”:0,”rid”:71,”ID”:2,”data”:{“Ret”:0,”Width”:0,”Height”:0,”SubTitle”:0,”Track”:0,”TrackCount”:0,”TeleText”:0,”Scale”:100,”AspectRatio”:””,”Crop”:””}}
32) 设置指定ID窗口视频信息，举例：
需要的才设置 FullScreen设置是否全屏显示，Scale比例 AspectRatio宽高尺寸 SubTitle子标题
请求：
{“req”:”VLC_VideoPut”,”rid”:72,”para”:[{“ID”:1,”FullScreen”:1,”Scale”:100,”AspectRatio”:””,”SubTitle”:0,”TeleText”:0,”Track”:0},{“ID”:2,”FullScreen”:0}]}
分别返回：{“ret”:0,”rid”:72,”data”:{“Ret”:0}} 和
{“ret”:0,”rid”:72,”ID”:2,”data”:{“Ret”:0}}
设置充满指定窗口大小显示：
{“req”:”VLC_VideoPut”,”rid”:72,”para”:[{“ID”:1,”Scale”:0,”AspectRatio”:”480:320″}]}
33) 切换指定ID窗口视频全屏，举例：
请求：
{“req”:”VLC_VideoToggleFullscreen”,”rid”:73,”para”:[{“ID”:1},{“ID”:2}]}
分别返回：{“ret”:0,”rid”:73,”ID”:1,”data”:{“Ret”:0}} 和
{“ret”:0,”rid”:73,”ID”:2,”data”:{“Ret”:0}}
34) 切换指定ID窗口视频图文，举例：
请求：
{“req”:”VLC_VideoToggleTeletext”,”rid”:74,”para”:[{“ID”:1},{“ID”:2}]}
分别返回：{“ret”:0,”rid”:74,”ID”:1,”data”:{“Ret”:0}} 和
{“ret”:0,”rid”:74,”ID”:2,”data”:{“Ret”:0}}
35) 取指定ID窗口字幕信息，举例：
Text指定时获取文字信息 Position指定时获取位置信息
请求：
{“req”:”VLC_MarqueeGet”,”rid”:75,”para”:[{“ID”:1,”Text”:1,”Position”:1},{“ID”:2}]}
分别返回：
{“ret”:0,”rid”:75,”ID”:1,”data”:{“Ret”:0,”Color”:0,”Opacity”:0,”Refresh”:0,”Size”:0,”Timeout”:0,”X”:0,”Y”:””,”Text”:””,”Position”:””}} 和
{“ret”:0,”rid”:75,”ID”:2,”data”:{“Ret”:0,”Color”:0,”Opacity”:0,”Refresh”:0,”Size”:0,”Timeout”:0,”X”:0,”Y”:””}}
36) 设置指定ID窗口字幕信息，举例：
需要的才设置
请求：
{“req”:”VLC_MarqueePut”,”rid”:76,”para”:[{“ID”:1,”Text”:”Hello”,”Position”:””,”Color”:0,”Opacity”:0,”Refresh”:0,”Size”:0,”X”:0,”Y”:0},{“ID”:2,”Opacity”:50}]}
分别返回：{“ret”:0,”rid”:76,”ID”:1,”data”:{“Ret”:0}} 和
{“ret”:0,”rid”:76,”ID”:2,”data”:{“Ret”:0}}
37) 控制指定ID窗口字幕，举例：
请求：
{“req”:”VLC_MarqueeControl”,”rid”:77,”para”:[{“ID”:1,”Enable”:1},{“ID”:2,”Enable”:0}]}
分别返回：{“ret”:0,”rid”:77,”ID”:1,”data”:{“Ret”:0}} 和
{“ret”:0,”rid”:77,”ID”:2,”data”:{“Ret”:0}}
38) 指定ID窗口帧速控制工具，举例：
Mode为空时禁用
请求：
{“req”:”VLC_DeinterlaceControl”,”rid”:78,”para”:[{“ID”:1,”Mode”:”my_mode”},{“ID”:2,”Mode”:””}]}
分别返回：{“ret”:0,”rid”:78,”ID”:1,”data”:{“Ret”:0}} 和
{“ret”:0,”rid”:78,”ID”:2,”data”:{“Ret”:0}}
39) 动态改变分屏数量或播放内容
ShowType指定分屏数量，如果不变就不设置
Play重新指定播放内容
请求范例1：{“req”:”VLC_ChangePlay”,”rid”:79,”para”:{“ShowType”:2}}
请求范例2：
{“req”:”VLC_ChangePlay”,”rid”:79,”para”:{“Play”:[{“ID”:1,”Uri”:”rtsp://wzh:test123456@192.168.1.8:554/h264/ch1/main/av_stream”,”Name”:”BrowserApplet1″,”Option”:”:rtsp-tcp”},{“ID”:2,”Uri”:”http://www.zorrosoft.com/Files/PluginOKBrowserApplet.mp4″,”Name”:”BrowserApplet2″,”Option”:”:file-caching=300″}]}}
请求范例3：
{“req”:”VLC_ChangePlay”,”rid”:79,”para”:{“ShowType”:3,”Play”:[{“ID”:1,”Uri”:”rtsp://wzh:test123456@192.168.1.8:554/h264/ch1/main/av_stream”,”Name”:”BrowserApplet1″,”Option”:”:rtsp-tcp :network-caching=300″},{“ID”:2,”Uri”:”http://www.zorrosoft.com/Files/PluginOKBrowserApplet.mp4″,”Name”:”BrowserApplet2″,”Option”:”:file-caching=400″},{“ID”:3,”Uri”:”rtsp://wzh:test123456@192.168.1.8:554/h264/ch1/main/av_stream”,”Name”:”BrowserApplet3″,”Option”:”:rtsp-tcp”}]}}
分别返回：{“ret”:0,”rid”:80,”data”:{“Ret”:0,”Play”:[]}}
40) 设置当前焦点播放窗口
ID是当前播放窗口序号，ID是从1开始，需要确保不越界
{“req”:”VLC_SetSelect”,”rid”:80,”para”:{“ID”:2}}
返回：{“ret”:0,”rid”:80,”ID”:2,”data”:{“Ret”:1}}
41) 获取当前焦点播放窗口序号
{“req”:”VLC_GetSelect”,”rid”:81,”para”:{}}
返回：{“ret”:0,”rid”:81,”ID”:2,”data”:{“Ret”:1}}
ID为当前播放焦点窗口
42) 指定ID窗口截图
Type 指定图像类型，默认4(PNG) 可指定1(BMP)、3(JPG)
Count截取图数量，默认截取一张，Delay指定延迟毫秒数开始，Interval多张时间隔毫秒数
PathType 指定截图图片保存路径类型，0默认中间件临时目录，1操作系统桌面 2当前登录用户我的图片目录
多窗口播放情况下，只能指定某个窗口截图，不能同时指定多个窗口
请求：
{“req”:”VLC_VideoSnapshot”,”rid”:82,”para”:[{“ID”:1,”Type”:4,”Count”:3,”Delay”:1000,”Interval”:200}]}
分别返回：
{“ret”:0,”rid”:82,”data”:{“Ret”:0,”Img”:[{“Size”:0,”Width”:0,”Height”:0,”File”:””}]}} 和
{“ret”:0,”rid”:80,”ID”:2,”data”:{“Ret”:0,,”Img”:[{“Size”:0,”Width”:0,”Height”:0,”File”:””}]}}
43) 设置RTSP流网络方式，HTTP还是TCP
{“req”:”VLC_SetRtspTcp”,”rid”:83,”para”:{“Tcp”:1}}
返回：{“ret”:0,”rid”:83,”data”:{“Ret”:1}}
44) 获取RTSP流网络方式，HTTP还是TCP
{“req”:”VLC_GetRtspTcp”,”rid”:84,”para”:{}}
返回：{“ret”:0,”rid”:84,”data”:{“Tcp”:1}}
45) 设置播放内容是否充满窗口
{“req”:”VLC_PutFillWnd”,”rid”:85,”para”:[{“ID”:1,”FillWnd”:1},{“ID”:2,”FillWnd”:0}]}
分别返回：{“ret”:0,”rid”:85,”ID”:1,”data”:{“Ret”:0}} 和
{“ret”:0,”rid”:85,”ID”:2,”data”:{“Ret”:0}}
46) 获取播放内容是否充满窗口
{“req”:”VLC_GetFillWnd”,”rid”:47,”para”:[{“ID”:1},{“ID”:2}]}
分别返回：{“ret”:0,”rid”:85,”ID”:1,”data”:{“Ret”:0,”FillWnd”:1}} 和
{“ret”:0,”rid”:85,”ID”:2,”data”:{“Ret”:0,”FillWnd”:0}}
47) 请求退出当前连接的小程序
正常关闭小程序流程和方法：先在此WS连接里请求此功能，前端收到关闭此连接通知时，再关闭到中间件的WS连接
{“req”:”VLC_Exit”,”rid”:87,”para”:{}}
无返回
4.2、VLC多媒体播放网页小程序接收的通知
A、ActiveX事件：
1) Idle state
{“event”:”VLC_MediaPlayerNothingSpeciale”,”ID”:1,”data”:{}}
2) Opening media
{“event”:”VLC_MediaPlayerOpening”,”ID”:1,”data”:{}}
3) Buffering media
{“event”:”VLC_MediaPlayerBuffering”,”ID”:1,”data”:{“cache”:0}}
4) Media is playing
{“event”:”VLC_MediaPlayerPlaying”,”ID”:1,”data”:{}}
5) Media is paused
{“event”:”VLC_MediaPlayerPaused”,”ID”:1,”data”:{}}
6) Forward playback
{“event”:”VLC_MediaPlayerForward”,”ID”:1,”data”:{}}
7) Backward playback
{“event”:”VLC_MediaPlayerBackward”,”ID”:1,”data”:{}}
8) An error has been encountered
{“event”:”VLC_MediaPlayerEncounteredError”,”ID”:1,”data”:{}}
9) End of playback reached
{“event”:”VLC_MediaPlayerEndReached”,”ID”:1,”data”:{}}
10) Playback stopped
{“event”:”VLC_MediaPlayerStopped”,”ID”:1,”data”:{}}
11) Playback stop async done
{“event”:”VLC_MediaPlayerStopAsyncDone”,”ID”:1,”data”:{}}
12) Seek changed
{“event”:”VLC_MediaPlayerSeekableChanged”,”ID”:1,”data”:{“seekable”:0}}
13) Pause setting changed
{“event”:”VLC_MediaPlayerPausableChanged”,”ID”:1,”data”:{“pausable”:0}}
14) Media changed
{“event”:”VLC_MediaPlayerMediaChanged”,”ID”:1,”data”:{}}
15) Title changed
{“event”:”VLC_MediaPlayerTitleChanged”,”ID”:1,”data”:{“title”:0}}
16) Length changed
{“event”:”VLC_MediaPlayerLengthChanged”,”ID”:1,”data”:{“length”:0}}
17) Chapter changed
{“event”:”VLC_MediaPlayerChapterChanged”,”ID”:1,”data”:{“chapter”:0}}
18) Number of vout changed
{“event”:”VLC_MediaPlayerVout”,”ID”:1,”data”:{“count”:0}}
19) Audio muted
{“event”:”VLC_MediaPlayerMuted”,”ID”:1,”data”:{}}
20) Audio unmuted
{“event”:”VLC_MediaPlayerUnmuted”,”ID”:1,”data”:{}}
21) Audio volume changed
{“event”:”VLC_MediaPlayerAudioVolume”,”ID”:1,”data”:{“volume”:0}}
22) Selected 选中分屏窗口序号通知
{“event”:”VLC_Selected”,”ID”:1,”data”:{}}
23) ToggleFullScreen 选中的分屏窗口切换全屏通知
{“event”:”VLC_ToggleFullScreen”,”ID”:1,”data”:{}}
23) KeyDown
{“event”:”VLC_KeyDown”,”ID”:1,”data”:{“KeyCode”:0,”Shift”:0}}
24) KeyPress
{“event”:”VLC_KeyPress”,”ID”:1,”data”:{“KeyCode”:0}}
25) KeyUp
{“event”:”VLC_KeyUp”,”ID”:1,”data”:{“KeyCode”:0,”Shift”:0}}
B、PluginOK支持的事件通知：
1) VLC_FullScreen 小程序是否响应了热键全屏
{“event”:”VLC_FullScreen”,”data”:{“FullScreen”:0}} FullScreen为当前是否全屏标记
2) Wrl_AppletExit 小程序退出通知
{“event”:”Wrl_AppletExit”,”data”:{“ID”:1}}
请求参数的JSON数据包，请确保是UTF-8无签名的编码。
更多关于PluginOK中间件的请求说明，请参考安装目录中的文档TestWrl.txt、SDK包中的“PluginOK开发者手册.pdf”及“PluginOK中间件安全解决方案.doc”。
如还有疑问请直接联系客服加微信：ZorroSoft咨询，或加QQ群：23126938和大家交流。
一、常见问题
- 多路播放时如何设置播放源？
在第四章开发集成中，已经在HTML网页中展示了如何配置播放多个RTSP源，类似如下代码：
<iframe name=”VLCApplet” id=”VLCApplet” src=”VLCApplet3.html” frameborder=”0″ align=”left” width=”550″ height=”540″ scrolling=”no>
<param ID=”2″ Play=”http://www.zorrosoft.com/Files/PluginOKBrowserApplet.mp4″ />
<param ID=”3″ Play=”rtsp://wzh:test123456@192.168.1.8:554/h264/ch1/main/av_stream” Caching=”500″ />
</iframe>
或者直接用
<div id=”VLCApplet” class=”VLCApplet”
<param ID=”2″ Play=”http://www.zorrosoft.com/Files/PluginOKBrowserApplet.mp4″ />
<param ID=”3″ Play=”rtsp://wzh:test123456@192.168.1.8:554/h264/ch1/main/av_stream” Caching=”500″ />
</div>
其中param指定具体的播放源，ID为窗口序号，第一个窗口的播放源已经在启动播放的JSON包中配置，这里就无需再配置。Caching是指定缓存时间，控制播放延迟效果的关键参数，如在这里设置了，那么Config.json中的配置就无效。如果在HTML网页中不方便配置多源，可在启动播放窗口后，新建一个WS连接到启动后的播放小程序侦听端口，再调用以下指令指定播放源：
动态改变分屏数量或播放内容
ShowType指定分屏数量，如果不变就不设置
Play重新指定播放内容
请求范例1：{“req”:”VLC_ChangePlay”,”rid”:79,”para”:{“ShowType”:2}}
请求范例2：
{“req”:”VLC_ChangePlay”,”rid”:79,”para”:{“Play”:[{“ID”:1,”Uri”:”rtsp://wzh:test123456@192.168.1.8:554/h264/ch1/main/av_stream”,”Name”:”BrowserApplet1″,”Option”:”:rtsp-tcp”},{“ID”:2,”Uri”:”http://www.zorrosoft.com/Files/PluginOKBrowserApplet.mp4″,”Name”:”BrowserApplet2″,”Option”:”:file-caching=300″}]}}
请求范例3：
{“req”:”VLC_ChangePlay”,”rid”:79,”para”:{“ShowType”:3,”Play”:[{“ID”:1,”Uri”:”rtsp://wzh:test123456@192.168.1.8:554/h264/ch1/main/av_stream”,”Name”:”BrowserApplet1″,”Option”:”:rtsp-tcp :network-caching=300″},{“ID”:2,”Uri”:”http://www.zorrosoft.com/Files/PluginOKBrowserApplet.mp4″,”Name”:”BrowserApplet2″,”Option”:”:file-caching=400″},{“ID”:3,”Uri”:”rtsp://wzh:test123456@192.168.1.8:554/h264/ch1/main/av_stream”,”Name”:”BrowserApplet3″,”Option”:”:rtsp-tcp”}]}}
分别返回：{“ret”:0,”rid”:80,”data”:{“Ret”:0,”Play”:[]}}
- 另外一个PID的VLC网页播放小程序有何用，如何用？
在中间件所在目录下的Test子目录中，有个文档“VLC双窗口播放.txt”，按其中步骤即可实现在同一个网页中，加载2个VLC网页播放窗口实现一些特定场景的需要。其播放程序实现都是一样的，唯一差别就是在网页中嵌入的PID不一样，启动播放的指令有差异，”req”:”Wrl_VLCWebPlayer”，启动指向的Url自然也是不同的。还有就是小程序文件目录的Config.json默认配置不一样，在使用VlcFrame.html网页播放不正常的情况下，可以直接打开测试网页vlcWebPlayer.html试试。在做正式授权时，一般默认是授权PID为90FC7E0E-0D2F-4C38-9875-B06407CE4556的，如您需要，可以改为授权PID为VLCWebPlayer的小程序，也可以两个都授权，不过需要额外支付一点费用。
- 实际播放的网络延迟达不到要求如何做？
首先检查默认的缓存参数设置是否够低，推荐设置300-500毫秒。另外检查摄像头的硬件配置性能，如配置太低也影响画面延迟。还有就是播放电脑终端的硬件性能，尽量采用性能好一些的电脑进行测试。此外，确保网络是通畅的，没有其他程序大量占用网络带宽、CPU和内存。必要时可请求我们的远程技术支持。播放多路时，由于影响因素较多，可以把主窗口的视频源设置为低延迟播放，其它辅助预览窗口可以把缓存时间设置大一些。
- VLC网页播放小程序是否收费？
大家都喜欢免费的东西，不过大家也常会听到一句话，免费往往是贵的。作为一个正常的商业软件公司，需要有合理的利润来支撑工程师继续维护升级，确保软件的稳定性和可用性，所以商业用途是收费的，如果有正式的公益机构出具证明项目用于公益，可向我们申请免费授权使用。本软件的授权费用也不贵，平均下来一个电脑终端的费用不到200元，购买授权后能够得到持续、长期、优质的售后服务，无疑是值得的。
- 播放器只能用VLC吗？
当然不是了，只不过VLC是当前市场上流行的开源多媒体播放器，全球有大量的优秀工程师在不断维护升级，稳定性和播放性能无疑是值得信赖的。如果您有特殊需求，可联系我们做定制开发，底层调用海康威视、大华、华为等视频播放控件也是完全没问题的，而且这些大厂的播放控件往往功能更丰富，比如实现云台控制，摄像头方向旋转等，有这些特殊需要的可以联系我们。
- 分屏播放样式都有哪些，没有我要的咋办？
目前VLC网页播放小程序提供了二十余种播放分屏风格，如您的需求特殊，可联系我们定制开发，也可以购买这个小程序的源代码，自行开发独有分屏样式。具体的分屏播放样式，从1分屏到16分屏都是支持的，还有一些特殊分屏效果，可以自行修改ShowType参数一一体验看效果，这里就不详细展开介绍了。
- VLC网页播放小程序和海康提供的网页播放组件有何差别？
对此我们特意从海康威视的官方网站下载了对应版本进行了体验，总结出如下几点不同：
1）、海康威视的网页播放组件不支持Firefox高版本浏览器，在当前国内政策环境下，尤其是政府部门和国企，往往都是推荐使用Firefox这个开源浏览器，其使用场景受限；
2）、海康威视的网页播放组件播放窗口和浏览器并非融为一体的，只是模拟显示的效果，和浏览器的联动效果比较差，有时会出现播放窗口黑框外溢情况；
3）、海康威视的网页播放组件采用的是QT开发，非常臃肿，程序包较大，不利于分发部署；
4）、想要使用海康威视网页播放组件，往往需要购买其昂贵的DSS系统方可使用，不经济不说，对其它品牌摄像头兼容性存疑；
5）、海康威视网页播放组件，未提供在线升级机制和安全调用机制，系统维护升级和安装性方面存在明显不足；
6)、海康威视的网页播放组件是完全闭源的，出现播放问题，可能迟迟得不到解决，而VLC网页播放小程序，跟播放相关的源代码是可自己掌握的，也就可以自行解决问题；
7)、海康威视的网页播放组件不支持XP系统使用。
- VLC网页播放小程序如何实现全屏播放？
在播放窗口中双击，或当前选中焦点视频中单机，可自动切换为全屏播放，键盘按键ESC可退出全屏播放，也可通过建立WS连接到播放小程序的端口，请求执行某个播放分屏的全屏操作，请求JSON如下：
先设置全屏有效：
{“req”:”VLC_PutFullScreenEnabled”,”rid”:58,”para”:[{“ID”:1,”FullScreenEnabled”:0},{“ID”:2,”FullScreenEnabled”:0}]} 全屏有效，然后在请求
{“req”:”VLC_VideoPut”,”rid”:72,”para”:[{“ID”:1,”FullScreen”:1},{“ID”:2,”FullScreen”:1}]}
另外可以请求播放小程序整个窗口全屏：
{“req”:”Wrl_AppletControl”,”rid”:2,”para”:{“ID”:”1″,”Code”:2}} 需要注意的是，这个请求并不能让某个分屏窗口全屏。
- VLC网页播放小程序是否能提供免插件的版本？
免插件自然是好，但是首先是要满足甲方客户提出的播放性能指标。甲方希望是无插件，主要还是担心插件的安全性和后续升级麻烦问题，为此VLC网页播放小程序方案提供了对应的安全调用机制和前端可自行请求升级的机制，很好地解决了这些后顾之忧。只需保证安装的播放器程序是安全的即可，必要的话可通过开放播放器源代码来打消客户对安全的顾虑。想要低延迟播放，只能采用这样的技术方案。
- 和使用WebRTC(网页即时通信)协议的播放有何差异？
虽然现代版浏览器已经对WebRTC支持的较好，但不支持H.265编码的视频流，况且还是需先进行协议转换再播放，性能等各方面还是欠缺的。单路播放尚可接受，多路、高清和H.265编码视频流还是无法胜任甲方客户实际需要的。
- 发送启动播放小程序的指令后没有看到播放画面？
首先检查本机是否已经安装了VLC网页播放小程序和对应的VLC桌面客户端版本；其次在启动播放的过程中，尽量确保浏览器在前景窗口显示，是在支持的浏览器中启动播放；如果还不行，可尝试重启电脑后再试，把程序运行目录下的data子目录打包给客服人员用来分析故障，此外检查日志文件C:\Users\你的用户名\AppData\Roaming\BrowserApplet\Temp\VlcWebPlayer.txt中输出的播放地址，是可以正常播放的。
