用vlc插件在页面上播放海康rtsp推流监控

最新推荐文章于 2024-07-24 14:38:31 发布

点滴进步

最新推荐文章于 2024-07-24 14:38:31 发布

阅读量1.8k

点赞数 1

分类专栏：视频文章标签： rtsp vlc

原文链接：https://blog.csdn.net/weixin_43948724/article/details/104422825

版权

视频专栏收录该内容

3 篇文章 0 订阅

订阅专栏

原文链接：https://blog.csdn.net/weixin_43948724/article/details/104422825

vlc插件目前只能在360、搜狗等可以开启兼容模式下的浏览器使用，开启兼容模式后可以同时运行插件和兼容现代浏览器的标签方法。
谷歌浏览器只有在很老的版本上才支持vlc插件的使用。
vlc插件配置好地址后播放较为稳定，一个页面上可以同时放二十多个不崩溃，相对于大华海康等提供的页面demo来说要方便稳定不少，大华海康提供的方法页面载入多个视频后极易崩溃。
vlc插件如果是单页面推荐使用，如果是多页面都有视频需要频繁切换的情况下，vlc插件在20-40次页面切换后会崩溃。

首先需要在电脑上安装一个vlc插件，下面是vlc3.0.8的32位版本。
vlc插件不知道为什么，64位的版本没有办法安装在浏览器上，只有32位的版本可以。
下载完进行安装时只需要一路点击下一步就行，默认的配置带着浏览器插件的安装。
vlc3.0.8 windows32位

安装完毕后就可以在360等浏览器中进行测试
如果想查看插件是否安装成功可以使用地址栏查看插件的位置
具体哪个地址忘记了不过搜索应该是有的

<object type="application/x-vlc-plugin" pluginspage="http://www.videolan.org/" id="vlc" events="false" width="95%" height="85%"  >
                <param name="mrl" value="rtsp://" />
                <param name="controls" value="false" />
                <param name="fullscreen" value="false" />
                <param name="loop" value="false" />
                <param name="autoplay" value="true" />
 </object>

   
   
   
   1
2
3
4
5
6
7

<script>
 let vlc = document.getElementById('vlc')
 let ar = '14:9'
 vlc.video.aspectRatio = ar
</script>	

   
   
   
   1
2
3
4
5

在html里加入object标签加入id
第一个param 的value里填入摄像头rtsp推流的地址
rtsp://admin:12345@172.6.22.106:554/h264/ch1/sub/av_stream
地址配置你的用户名密码IP端口码流
可以参考
下面的script的vlc是为了获取id然后使用vlc.video.aspectRatio方法固定插件显示的比例
object可以算是一个普通的元素，将视频调整到合适的位置