VLC Web插件
问题描述
近期由于工作项目组人员变动，来到新的项目组，Leader约谈前期也不安排过多任务，但是有一个项目中现有的问题需要解决。项目中视频在线播放功能需要支持在线播放.avi媒体格式，当前实现的在线播放使用的是HTML5中的Video标签并不支持.avi媒体视频，安排研究一下VLC Media Player多媒体播放器。当听到这个VLC名词后，心里略微忐忑，果然事情并不一帆风顺，开启了刨坑之旅。
VLC Web 插件
简介
VLC media player webplugins 是浏览器原生插件，类似于Flash和Silverlight 插件，并且能够在浏览器中播放所有 VLC media player 能读取的视频。
除了能在网页上播放视频外，你也可以用插件的高级特性来定制自定义页面，并且通过javascript来控制播放或者获取其他的信息。
目前主要有两种插件：一个是IE的ActiveX插件，另外一个是其他浏览器的NAAPI插件，这两个插件具有相同的特性。
浏览器支持
| 浏览器 | 是否支持 |
|---|---|
| Mozilla Firefox | 小于52支持、高版本停止支持NAAPI |
| Internet Explorer | IE8+都支持( > IE8 未测试) |
| Chorme | chorme版本小于46 |
详细的浏览器兼容信息可参考VLC WEB插件浏览器兼容性
推荐使用的VLC版本为2.0+，本章使用的版本为2.2.0，不适宜用较高版本
使用方式
首先在使用前需要下载VLC到本机上，安装步骤按照推荐安装即可
将插件嵌入网页中，请使用<emebed>模板
<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" />
如果您在Internet Explorer中使用vlc版本<2.2.0，请使用以下模板
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab"></object>
相应的标记属性声明，使用<param>标签
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab">
<param name="autostart" value="true" />
<param name="allowfullscreen" value="false" />
</object>
为了与mozilla插件兼容，您可以组合两个标记
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab" id="vlc">
<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" name="vlc" />
</object>
此次使用的代码示例如下
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" type="application/x-vlc-plugin" pluginspage="http://www.videolan.org/" >
<param name="src" value="" />
<param name="autoloop" value="false" />
<param name="autoplay" value="true" />
</object>
<embed>标记的必需属性有
- width：插件的宽度
- height: 插件的高度
- src(mrl、filename、target): 指定加载的媒体视频的URL地址
<embed>标签的非必须属性有
- autoplay，autostart：指定插件是否在加载时开始播放。默认值：true
- allowfullscreen（或fullscreenEnabled，fullscreen）:(自VLC版本2.0.0）指定用户是否可以切换到全屏模式。默认值：true
- windowless :(因为VLC版本2.0.6，仅适用于Mozilla）在无窗口（非加速）表面上绘制视频并允许样式化（CSS叠加，3D转换等等）。默认值：false
- mute：指定音频音量最初是否静音。默认值：false
- volume :(自VLC版本2.2.2开始）以百分比形式指定初始音频音量。默认值：100
- loop，autoloop：指定视频是否循环播放。默认值：false
- controls (或toolbar)：指定默认情况下是否显示控件。默认值：true
- bgcolor：指定视频播放器的背景颜色。默认值：＃000000
- text :(仅适用于MacOS上的Mozilla）指定只要不显示视频就显示的文本。默认值：空
- branding:(仅适用于MacOS上Mozilla的vlc版本<2.2.2）指定是否应在Web插件的绘图上下文中显示VLC品牌。默认值：true
VLC JavaScript API
vlc插件导出几个可以访问的对象，用于设置和获取信息。如果使用不当，API会抛出一个异常，其中包含一个解释发生了什么的字符串。例如，当您将vlc.audio.track设置为超出范围时。如下示例：
以下JS API本次项目中无法识别VLC相关属性，可能存在版本因素
<!DOCTYPE html>
<html>
<title>VLC Mozilla plugin test page</title>
<body>
<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
width="640"
height="480"
id="vlc" />
<script type="text/javascript">
var vlc = document.getElementById("vlc");
vlc.audio.toggleMute();
</script>
</body>
</html>
以下是本次运行结果截图，IE与360浏览器均测试通过，未测试谷歌，本机版本过高。
VLC的属性对象本章不做详细说明，可参考VLC Web详解
问题记录
一、本此踩坑的第一记录就是浏览器兼容性、版本问题以及VLC下载的版本问题。
- 建议使用==vlc2.0.0==的版本
- 使用==IE或者360浏览器极速模式==
- 确保浏览器支持的插件功能打卡，IE的ActiveX如下
打开IE浏览器的Internet选项 -》 安全 -》 下面的自定义级别 -》 弹出的安全设置中启用ActiveX控件和插件的功能选项
二、起初写的单页面进行测试，视频通过的src属性通过本地文件路径以及http请求形式均可正确播放，本以为项目照搬即可，当又发现新的问题。
vlc web插件中视频路径(URL)含有中文字符和符号
在demo测试中，视频地址均使用过中文与英文的名称。项目中是通过数据库记录中保存的视频链接地址获取的视频，在URL中包含有中文字符以及符号等，动态设置插件的相应属性后，再由浏览器发送视频请求地址缺发现404错误 ，视频服务器端路径请求未找到，仔细排查到到请求链接中的中文字符被转为ASCII码再发送的请求，地址已经对应不上。
于是想到通过在后端接口中，将请求的URL数据中的中文字符以及符号进行转码后替换。
final String REGEX = "[\u4e00-\u9fcc]+";
Pattern pattern = Pattern.compile(REGEX);
Matcher matcher = pattern.matcher(videoPath);
if (matcher.find()){
// ps：视频url中含有特殊字符(、)，按照http请求替换成相应字符表示
videoPath = matcher.replaceAll(URLEncoder.encode(matcher.group(), "UTF-8"))
.replace("(", "%28")
.replace(")", "%29")
.replace(" ", "%20");
相应的符号也一并替换，否则只替换中文字符转码后也可能找不到路径，本人亲测，含有（）括号，未替换之前对比请求发现有差别
PS：HTTP请求应该严格按照标准，相应的特殊字符替换可参考HTTP特殊字符替换
总结
经过一系列的踩坑后，终于可以正确播放视频。之前一直想在CSDN上记录所遇到的问题和知识，今日才正式完成了第一篇，有不足之处请各位多多指正。
3585
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
