参考文章

  1. vue对接官方插件WebControl:https://blog.csdn.net/qq_41732963/article/details/115670910
  2. vue无海康官方插件对接:https://blog.csdn.net/qq_41732963/article/details/115655739
  3. 海康监控流有多种协议
  • 实时串流协议(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下载

Logo

前往低代码交流专区

更多推荐