web前端监控视频的展示

最新推荐文章于 2025-11-17 09:40:56 发布

转载

最新推荐文章于 2025-11-17 09:40:56 发布 · 2.9k 阅读

16 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/webgis-ling/p/11466273.html

文章标签：

#前端 #ViewUI

本文介绍了在前端实现监控视频展示的方法，包括RTSP视频流（依赖VLC插件，兼容性不佳）、HLS（有几秒延迟，网络要求低）和FLV（无延迟，网络要求高）流。通过HTML5的Object标签和video标签，结合hls.min.js和flv.min.js库，实现了良好的浏览器兼容性。

监控视频的前端展示，我主要做过三种视频流的展示：rtsp，HLS和FLV。

1、rtsp视频流

　　rtsp视频流需要安装插件，我当时做这个流是安装VLC播放器插件，这个插件兼容性不好，目前只发现360浏览器能正常播放，局限性很大。用HTML5的Object标签，看代码：

 1 <object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" 
 2       codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab"
 3       id="vlc"
 4       name="vlc"
 5       class="vlcPlayer"
 6        events="True" width="400" height="400">
 7         <param name="Src" value="rtsp://admin:123456@IP:port/cam/realmonitor?channel=1&subtype=0" />
 8