一、简介

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

(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技术快餐
电子邮箱：lixx2048@163.com