H5播放Rtmp之videojs播放

一、简介

我们看到了HLS播放视频实时性非常差，好的在6-7s，差点的就要10-12s了，也就是人走了，估计视频上还能看到，这对观感效果造成了很大的影响！但是好处就是它是基于http协议文件下载的，所以不需要任何插件，到处播放，处处兼容，所以rtmp和hls在web端的特点如下：

HLS
(1) 使用http协议，兼容所有浏览器。
(2) 延时非常大，不太适合实时视频源，适合文件点播或历史录像直播。
RTMP
(1) 使用flash插件播放，不兼容所有浏览器(特别2020年12月后chrome带头不再支持flash)
(2) 浏览器播放需要对浏览器安全进行设置，此外点播可能还会弹出确定提示，交互体验较差
(3) 更贴近传统监控的实时协议，实时性非常好，基本与实时视频点播一致

考虑到实时性，我们可能还会选择使用rtmp协议点播我们的视频，所以就实时性而言还是很有必要考虑rtmp协议的使用，接下来，我要跟大家一起分享的就是在web端使用rtmp协议查看视频。

二、VideoJS播放rtmp

前端播放代码如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>播放rtmp流</title>
		<!--引入播放器样式-->
		<link href="/5.19/" rel="stylesheet">
		<!--引入播放器js-->
		<script src="/5.19/"></script>
		<script src="/npm/videojs-flash@2/dist/"></script>
	</head>
	<body>
		<!--vjs-big-play-centered 播放按钮居中-->
		<!--poster默认的显示界面，就是还没点播放，给你显示的界面-->
		<!--controls 规定浏览器应该为视频提供播放控件-->
		<!--preload="auto" 是否提前加载-->
		<!--autoplay 自动播放-->
		<!--loop=true 自动循环-->
		<!--data-setup='{"example_option":true}' 可以把一些属性写到这个里面来，如data-setup={"autoplay":true}-->
		<video 
			class="video-js vjs-default-skin vjs-big-play-centered" controls
			preload="auto" autoplay="autoplay"
			poster="images/" width="500" height="400"
			data-setup='{}'>
			<!--src: 规定媒体文件的 URL  type:规定媒体资源的类型-->
			<source src='rtmp://192.168.12.187:1935/live/1' type='rtmp/flv' />
		</video>
		<script type="text/javascript">
		    // 设置flash路径,用于在videojs发现浏览器不支持HTML5播放器的时候自动唤起flash播放器
		     = '/videojs-swf/5.4.1/';
		  	//my-player为页面video元素的id
		    var player = videojs('my-player'); 
		  	//播放
		    (); 
			//    1. 播放   ()
			//    2. 停止   ()
			//    3. 暂停   ()
		</script>
	</body>
</html>

我使用的是360浏览器，测试没有提示flash插件安全限制，直接播放出来。延迟时间大概在1s以内。
在这里插入图片描述

那么如何解决？我们需要配置chrome允许flash运行，在chrome浏览器中输入设置地址：

chrome://settings/content/flash

在这里插入图片描述
浏览器开放flash之后并不是所有浏览器就可以播放了，如果是http的可能会提示不安全，需要单独为该网站开放flash，如下所示，点击chrome浏览器“不安全”提示按钮，在菜单中打开flash

再次刷新该网站就可以看到rtmp直播视频了
在这里插入图片描述
源码获取、合作、技术交流请获取如下联系方式：
QQ交流群：961179337

微信账号：lixiang6153
公众号：IT技术快餐
电子邮箱：lixx2048@

秒客网

H5播放Rtmp之videojs播放

一、简介

二、VideoJS播放rtmp

相关文章