VLC Web Plugin实现HTML5流媒体播放

因为之前在首届数字中国建设峰会中使用过VLC Web Plugin对RTSP的视频直播进行支持,今天突然前同事因为某个项目询问如何支持,特写在此处,供大家参考。本文只覆盖“通过VLC Web Plugin的使用,对接现有的RTSP服务进行实时流播放”这一主题,其余内容,感兴趣的童鞋请自行谷歌。

RTSP(Real Time Streaming Protocol)是一种实时流协议,广泛用于各类视频监控、流媒体服务上。HTML5的Video标签本身是渐进式的,Apple开发并推广的HLP(HTTP Live Streaming)虽然得到了主流浏览器厂商的支持,但实际应用场合中RTSP还是居多。在HTML5发展初期,还有一种实时流技术RTMP(Real-Time Messaging Protocol),其是Adobe/Macromedia为FMS(Flash Media Server)开发的一款实时流协议,闪界的朋友们应该不会陌生,可以通过在HTML5中内嵌Flash来实现实时流的播放。

VLC又称VLC Media Player,是一个自由、开源、便捷、跨平台的媒体播放器,由非营利性组织VideoLAN开发并维护,所支持的格式非常全面,也是我在macOS上的默认播放器。VideoLAN旗下的VLC Web Plugin用于在浏览器中实现对所有VLC支持格式的多媒体内容的内嵌式播放。

首先,我们需要下载安装VLC Web Plugin,由于其在VideoLAN官方的下载选项比较隐蔽,下方直接贴出文件地址。

macOS(VLC 3.x版本目前暂未提供macOS版本的Web Plugin,因此下方链接为书写此文时2.x的最高版本2.2.8)

https://get.videolan.org/vlc/2.2.8/macosx/VLC-webplugin-2.2.8.dmg

win32/win64(未找到单独的VLC Web Plugin安装程序,在安装VLC时有插件安装选项,参见附图,附图来源:孟少华

https://get.videolan.org/vlc/last/win32/vlc-3.0.3-win32.exe
https://get.videolan.org/vlc/last/win64/vlc-3.0.3-win64.exe

安装完毕便可以编写HTML5页面来测试,如下是RTSP测试。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VLC Web Plugin RTSP DEMO</title>
</head>
<body>
<h1>VLC Web Plugin RTSP DEMO</h1>
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
        codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab"
        style="width: 640px; height: 480px;">
  <param name="src" value="rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov"/>
  <param name="autostart" value="true"/>
  <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
         width="640px"
         height="480px"
         src="rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov"/>
</object>
</body>
</html>

实测效果:

如下是RTMP测试。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VLC Web Plugin RTMP DEMO</title>
</head>
<body>
<h1>VLC Web Plugin RTMP DEMO</h1>
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
        codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab"
        style="width: 640px; height: 480px;">
  <param name="src" value="rtmp://live.hkstv.hk.lxdns.com/live/hks"/>
  <param name="autostart" value="true"/>
  <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
         width="640px"
         height="480px"
         src="rtmp://live.hkstv.hk.lxdns.com/live/hks"/>
</object>
</body>
</html>

实测效果如下:

实际使用时只需将上述示例中的实时流链接地址更换为实际地址即可,注意:为了兼容性,有两处src声明

macOS下Safari测试通过,windows下(使用32位插件)IE、Firefox测试通过,其余环境可能存在兼容问题。

最后附上VLC Web Plugin的官方Wiki说明,其中有很多控制选项可供各类场合使用。

https://wiki.videolan.org/Documentation:WebPlugin/

Cheer~

音乐分析试验

国庆中秋闲暇时,想起几年前在Flash上实验的动态音色生成库,以及节拍捕捉,顿时感慨颇多。

操起HTML5进行了一些初级实验,打算由浅及深地推进几年前的想法:实时音乐情感可视化。

当前使用的是Web Audio以及WebGL技术,后续的计划是引入DNN。

因为很懒,很久未更新博客了,权当一篇记录吧。

# 实验02

BGM: Gooey by Glass Animals

# 实验03

BGM: In the Grace of Your Love by The Rapture

# 实验04

BGM: Warm In the Winter by Glass Candy

ElementRiver SourceMate Keygen

以下程式仅供计算机爱好者或个人研究与参考之用,请勿用于任何商业场合。

如侵犯了您的合法权益,请即刻联系我,我会尽快将此程式删除。

今天首先要纪念一下,咱们(@万博思图)的WebOS框架玲珑Nephrite v0.2版正式上线了,具备多种高级特性。PS,作为架构师,我定版本号是v0.2,俺们Boss对此颇有微词,说既然v0.2比v0.1版本是质变的升级,不如直接叫v2.0了。

好了,言归正传,下午感冒所以脑残,把ElementRiver给Flash Builder开发的工具集合插件SourceMate给破解了,并制作了简易的注册机,可以生成符合其算法标准的序列号。目前其最新版本是3.x,建议大家直接用Enterprise版,当然想暴力测试验证俺算法是否正确的朋友,欢迎折腾:lol:

以下是在我们公司内部的WebOS上部署的实例截图。

因为该软件在注册时会访问网络验证,因此在注册前,请在hosts文件里添加下述内容,以便将其网络验证这一功能废除。

# source mate
127.0.0.1 services.elementriver.com

以下附上在线Flash版本的Keygen程式。

乔迁,涣然一新~

忽忽,以前的服务器被某些比较讨厌的公司和个人搞坏了,以前的数据全部没了,比较郁闷。

不过,新的服务器支持PHP5和MySQL5,呵呵,于是顺理成章的搬家了,还用上了心动已久的WordPress,果然塞翁失马,不一定都是坏事哈哈。

但是,绝对不能让这个服务器再被黑了~大伙们,我回来啦!