一、简介

我们看到了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协议查看视频。

二、FlowPlayer播放rtmp

Flowplayer 是一个开源（GPL 3的）WEB视频播放器。您可以将该播放器嵌入您的网页中，如果您是开发人员，您还可以自由定制和配置播放器相关参数以达到您要的播放效果。本文主要介绍Flowplayer的使用。

web端使用如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>rtmp直播</title>
	<link rel="stylesheet" href="./css/video-js.css">
	<link rel="stylesheet" href="./css/h5splayer.css">
	<script src="js/flowplayer-3.2.13.min.js"></script>
</head>
<body>
	<center>播放rtmp</center>
	<div class="h5video" id="playerDiv1" style="float: left;"></div>
	<script>
		// 播放地址
		var url_1 = 'rtmp://192.168.12.187:1935/live/1';
		var oPlayerDiv1 = document.getElementById('playerDiv1');
		oPlayerDiv1.setAttribute("data-rtmp", url_1);
		oPlayerDiv1.setAttribute("href", url_1);

		var swfStr = "./js/flowplayer-3.2.18.swf"
		var	obj_1 = {
				clip: {
					provider: 'rtmp',
					bufferLength: 0,
					bufferTime: 0,
					autoPlay: true,
					live: true
				},
				plugins: {
					rtmp: {
						url: "js/flowplayer.rtmp-3.2.13.swf",
						netConnectionUrl: url_1
					}
				}
		};
		// JSON.stringify(obj_1)
		flowplayer('playerDiv1', swfStr, obj_1);
	</script>
</body>
</html>

经过测试flowplayer要比videojs快那么一丢丢，感觉在200ms-400ms左右，不过最大的问题是flowplayer免费的左下角有一个flowplayer的logo，放大全屏播放后右上角有一个flowplayer的logo（网上据说可以去掉的）

在这里插入图片描述

源码获取、合作、技术交流请获取如下联系方式：
QQ交流群：961179337

微信账号：lixiang6153
公众号：IT技术快餐
电子邮箱：[email protected]

H5播放Rtmp之Flowplayer播放

一、简介

二、FlowPlayer播放rtmp

猜你喜欢