【视频直播之】浏览器播放RTMP和HLS流

最新推荐文章于 2024-05-12 00:51:49 发布

gwcgwcjava

最新推荐文章于 2024-05-12 00:51:49 发布

阅读量2.4k

点赞数 1

分类专栏： opencv-java 文章标签：播放器 videojs

本文链接：https://blog.csdn.net/gwcgwcjava/article/details/100040944

版权

opencv-java 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近在做安防方面的视频直播方案

整个方案的架构是这样：

前端海康摄像头通过路由器连外网，同时现场有一台工控机也连接到这个路由器上，通过ffmpeg进行将RTSP转码为RTMP，上传至七牛云流媒体服务器。从流媒体服务器上，web客户端可以获得三种播放流：rtmp/hls/flv，那么web端用什么播放器呢！

寻寻觅觅，幂幂寻寻，终于找到了videojs.js这个神器

先来一段官方介绍：

官网：https://videojs.com/

网上有各种骗取积分的文章和下载链接，告诉你什么最后，什么唯一，就是为了骗取积分的，下载积分还超级高

接下来会用最最简单的方式实现rtmp和hls的播放

一步一步来：

第一步：下载videojs.js

可以通过cdn进行引用

<link href="https://vjs.zencdn.net/7.6.0/video-js.css" rel="stylesheet">
<script src='https://vjs.zencdn.net/7.6.0/video.js'></script>

第二步：

因为最新的版本，6.x及以上版本vedio的flash支持单独用videojs-flash.js插件，所以要引用这个插件

<script src='https://vjs.zencdn.net/7.6.0/video.js'></script>

第三步：配置video标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="https://vjs.zencdn.net/7.6.0/video-js.css" rel="stylesheet">
		<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
		<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
	</head>
	<body>
		<video id="my-video" class="video-js" controls preload="auto" width="960" height="400" autoplay 
		 data-setup="{}">
			<source src="rtmp://pili-live-rtmp.xishuaiiot.com/xishuaiiot/home?sign=3b01cb45a44c981e0e9c4a2f2899d3da&t=5d5fa46d"
			 type="rtmp/flv">
		</video>

		<script src='https://vjs.zencdn.net/7.6.0/video.js'></script>
		<script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>
		<script type="text/javascript">
			var myPlayer = videojs('my-video');
			videojs("my-video").ready(function() {
				var myPlayer = this;
				myPlayer.play();
			});
		</script>
	</body>
</html>

第四步：运行

第五步：支持播放hls格式

hls需要videojs-contrib-hls.js支持，需要放到flash引用后面

<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>

最终代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="https://vjs.zencdn.net/7.6.0/video-js.css" rel="stylesheet">
		<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
		<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
	</head>
	<body>
		<video id="my-video" class="video-js" controls preload="auto" width="960" height="400" autoplay 
		 data-setup="{}">
			<source src="rtmp://pili-live-rtmp.xishuaiiot.com/xishuaiiot/home?sign=379e3f934117adc9d2266cfe08b6c45e&t=5d5fa6f2"
			 type="rtmp/flv">
		</video>
		<video id="myVideo2" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="960" height="400" data-setup='{}'>      
	        <source id="source" src="http://pili-live-hls.xishuaiiot.com/xishuaiiot/home.m3u8?sign=b191bdad24aac402599563d948b5dce9&t=5d5fa6e6"  type="application/x-mpegURL">  
	    </video> 

		<script src='https://vjs.zencdn.net/7.6.0/video.js'></script>
		<script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>
		<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
		
		<script language="JavaScript">
			var myPlayer = videojs('my-video');
			videojs("my-video").ready(function(){
				var myPlayer = this;
				myPlayer.play();
			});
			
			var myPlayer2 = videojs('myVideo2');
			videojs("myVideo2").ready(function(){
				var myPlayer2 = this;
				myPlayer2.play();
			});
		</script>
	</body>
</html>

好了就到这了

参考：https://www.npmjs.com/package/videojs-contrib-hls

参考：https://www.cnblogs.com/FHC1994/p/9981440.html

gwcgwcjava

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【视频直播之】浏览器播放RTMP和HLS流

最近在做安防方面的视频直播方案整个方案的架构是这样：前端海康摄像头通过路由器连外网，同时现场有一台工控机也连接到这个路由器上，通过ffmpeg进行将RTSP转码为RTMP，上传至七牛云流媒体服务器。从流媒体服务器上，web客户端可以获得三种播放流：rtmp/hls/flv，那么web端用什么播放器呢！寻寻觅觅，幂幂寻寻，终于找到了videojs.js这个神器 ...
复制链接

扫一扫

专栏目录