一、简介

咱们看到了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>video.js播放rtmp流</title>        <!--引入播放器款式-->        <link href="http://vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet">        <!--引入播放器js-->        <script src="http://vjs.zencdn.net/5.19/video.min.js"></script>        <script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>    </head>    <body>        <!--vjs-big-play-centered 播放按钮居中-->        <!--poster默认的显示界面,就是还没点播放,给你显示的界面-->        <!--controls 规定浏览器应该为视频提供播放控件-->        <!--preload="auto" 是否提前加载-->        <!--autoplay 自动播放-->        <!--loop=true 主动循环-->        <!--data-setup='{"example_option":true}' 能够把一些属性写到这个外面来,如data-setup={"autoplay":true}-->        <video id="my-player"            class="video-js vjs-default-skin vjs-big-play-centered" controls            preload="auto" autoplay="autoplay"            poster="images/logo.png" 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.options.flash.swf = 'https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf';              //my-player为页面video元素的id            var player = videojs('my-player');               //播放            player.play();             //    1. 播放   player.play()            //    2. 进行   player.pause()            //    3. 暂停   player.pause()        </script>    </body></html>

我应用的是360浏览器,测试没有提醒flash插件平安限度,间接播放进去。延迟时间大略在1s以内。


那么如何解决?咱们须要配置chrome容许flash运行,在chrome浏览器中输出设置地址:

chrome://settings/content/flash


浏览器凋谢flash之后并不是所有浏览器就能够播放了,如果是http的可能会提醒不平安,须要独自为该网站凋谢flash,如下所示,点击chrome浏览器“不平安”提醒按钮,在菜单中关上flash

再次刷新该网站就能够看到rtmp直播视频了

源码获取、单干、技术交换请获取如下联系方式:
QQ交换群:961179337

微信账号:lixiang6153
公众号:IT技术快餐
电子邮箱:lixx2048@163.com