参考文章
- vue对接官方插件WebControl：https://blog.csdn.net/qq_41732963/article/details/115670910
- vue无海康官方插件对接：https://blog.csdn.net/qq_41732963/article/details/115655739
- 海康监控流有多种协议
- 实时串流协议（Real Time Streaming Protocol，RTSP）是一种网络应用协议，专为娱乐和通信系统的使用，以控制流媒体 服务器。该协议用于建立和控制终端之间的媒体会话。媒体服务器的客户端发布VCR命令，例如播放，录制和暂停，以便于实时控制从服务器到客户端（视频点播）或从客户端到服务器（语音录音）的媒体流。
- RTMP 实时消息协议（英语：Real-Time Messaging Protocol，缩写RTMP）也称实时消息传输协议，是最初由Macromedia为通过互联网在Flash播放器与一个服务器之间传输流媒体音频、视频和数据而开发的一个专有协议。
- HLS HTTP Live Streaming（缩写是HLS）是一个由苹果公司提出的基于HTTP的流媒体网络传输协议
总结，因为RTMP需要依赖Flash，但是现在很多浏览器需要自己主动安装插件，所以给到客户使用是不太合理的，所以建议采用HLS协议
我这里使用的取流方式是HLS所以返回的URL后缀的m3u8，这种格式的文件不能直接播放。
hls示例（直接运行就可以）：
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>播放m3u8格式</title><link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet"><script src="https://unpkg.com/video.js/dist/video.js"></script></head><body><style>.video-js .vjs-tech {position: relative !important;}</style><div><video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}'style='width: 100%;height: auto'><source id="source" src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" type="application/x-mpegURL"></source></video></div></body><script>var myVideo = videojs('myVideo', {bigPlayButton: true,textTrackDisplay: false,posterImage: false,errorDisplay: false,},function ready(){this.play()})// myVideo.play()var changeVideo = function(vdoSrc) {if (/\.m3u8$/.test(vdoSrc)) {myVideo.src({src: vdoSrc,type: 'application/x-mpegURL'})} else {myVideo.src(vdoSrc)}myVideo.load();myVideo.play();}</script>RTMP协议播放（这个chrome需要安装Flash插件，或者直接用360浏览器打开，他好像集成了Flash插件）
<!DOCTYPE html>
<html><head><title>播放器</title><!-- 导入的videojs是7.0版本以上的，集成VHS协议库，可播放HLS流媒体视频 --><link href="videolib/css/video-js.min.css" rel="stylesheet" type="text/css"><script src="videolib/js/video.min.js"></script><!-- 引入的videojs-flash.js插件主要是为播放rtmp视频流--><script src="videolib/videojs-flash.min.js"></script></head><body><video id='myvideo' width=960 height=540 class="video-js vjs-default-skin" controls><!-- RTMP直播源地址--><source src="rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp"> </video><script> var player = videojs('myvideo', {}, function(){console.log('videojs播放器初始化成功')})player.play();</script></body>
</html>
示例代码，github下载
