一、简介
我们看到了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直播视频了