如何利用VLC插件实现H5播放RTSP视频流

目前市场上的网络摄像机流类型基本都是RTSP流，无法像RTMP流直接在网页直接播放，需要利用网页插件才能播放，大部分监控厂商都有提供一个插件，但是基本只兼容IE，在谷歌、火狐等知名浏览器上无法播放，下面内容整理了实现在火狐和以IE、google内核的浏览器(QQ浏览器、360浏览器、猎豹等)上实现直播网络摄像头视频。

VLC采用当前最新版本vlc-3.0.2-win32.exe

qq浏览器测试过当前最新版9.7（12900）
谷歌内核53.0.2785/IE 11.48.17134.0

火狐浏览器52以下版本（亲测，最大选择51版本）安装完必须把自动更新关闭,否则下次打开就自动更新到最新版的火狐了
http://www.cnblogs.com/ningheshutong/p/7955519.html
https://wiki.videolan.org/Documentation:WebPlugin/
火狐浏览器各版本的下载地址 http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/

https://videoconverter.wondershare.com/vlc/vlc-web-plugins-for-top-browsers.html

-------------google测试失败，需要下一个网页插件，由于网络条件限制无法下载插件。

Google Chrome version 45 and above no longer support NPAPI which is used by VLC plugin.
Google 浏览器启用方法
https://www.vboxcomm.com/enable-vlc-web-plugin-in-google-chrome-npapi.html?tmpl=component

Google Chrome v43.0.2357.130 32位版离线包
http://dl.google.com/chrome/win/B6585D9F8CF5DBD2/43.0.2357.130_chrome_installer.exe
http://redirector.gvt1.com/edgedl/chrome/win/B6585D9F8CF5DBD2/43.0.2357.130_chrome_installer.exe
Google Chrome v43.0.2357.130 64位版离线包
http://dl.google.com/chrome/win/E1CA8F569E08619C/43.0.2357.130_chrome64_installer.exe
http://redirector.gvt1.com/edgedl/chrome/win/E1CA8F569E08619C/43.0.2357.130_chrome64_installer.exe

谷歌浏览器Chrome 44.0.2403.157更新日志：
常规修复更新。
本软件支持Windows XP、Vista、Win7、Win8、Win8.1以及Win10，41.5MB。
下载地址：
32位离线包：https://dl.google.com/chrome/win/F24BEBCD670E2ACB/44.0.2403.157_chrome_installer.exe
64位离线包：https://dl.google.com/chrome/win/1119FA397D484864/44.0.2403.157_chrome64_installer.exe
MAC版下载：http://www.google.com/chrome?platform=mac&hl=zh_CN

html源码：
<html>
<body>
<object id="vlc" type='application/x-vlc-plugin' width="640" height="480" pluginspage="http://www.videolan.org" codebase="http://comic.sjtu.edu.cn/vlc/cab/axvlc.cab">

<param name='controls' value='false' />
<param name='text' value='正在加载视频中...' />
<param name='branding' value='false' />
<embed type="application/x-google-vlc-plugin" ></embed>
</object>
<script type="text/javascript">
setTimeout(function(){
/* 用js 设置视频地址 setTimeout 防止组件未加载好js先执行结束，导致视频无法播放*/
var vlc = document.getElementById("vlc");
var options = new Array(":network-caching=300");//减少延迟
var id = vlc.playlist.add("rtsp://admin:[email protected]", "vedio", options);
//vlc.playlist.play()
vlc.playlist.playItem(id);
},500)
</script>
</body>
</html>

如何利用VLC插件实现H5播放RTSP视频流

猜你喜欢