VLC Web插件踩坑记录

2021-01-06 18:31:40 阅读：527 来源： 互联网

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>

width：插件的宽度
height: 插件的高度
src(mrl、filename、target): 指定加载的媒体视频的URL地址

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上记录所遇到的问题和知识，今日才正式完成了第一篇，有不足之处请各位多多指正。

标签：Web,插件,浏览器,视频,VLC,版本,默认值
来源： https://blog.csdn.net/Ambition_wp/article/details/112281204

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9