HTML5实现视频直播功能思路详解

2019-01-28 21:52:43王振洲

2. Real Time Messaging Protocol

Real Time Messaging Protocol(简称 RTMP)是 Macromedia 开发的一套视频直播协议,现在属于 Adobe。这套方案需要搭建专门的 RTMP 流媒体服务如 Adobe Media Server,并且在浏览器中只能使用 Flash 实现播放器。它的实时性非常好,延迟很小,但无法支持移动端 WEB 播放是它的硬伤。

虽然无法在iOS的H5页面播放,但是对于iOS原生应用是可以自己写解码去解析的, RTMP 延迟低、实时性较好。浏览器端,HTML5 video

标签无法播放 RTMP 协议的视频,可以通过 video.js 来实现。

<link href=“http://vjs.zencdn.net/5.8.8/video-js.css” rel=“stylesheet”> <video id=“example_video_1″ class=“video-js vjs-default-skin” controls preload=“auto” width=“640” height=“264” loop=“loop” webkit-playsinline> <source src=“rtmp://10.14.221.17:1935/rtmplive/home” type=‘rtmp/flv’> </video> <script src=“http://vjs.zencdn.net/5.8.8/video.js”></script> <script> videojs.options.flash.swf = ‘video.swf’; videojs(‘example_video_1′).ready(function() { this.play(); }); </script>

3. 视频流协议HLS与RTMP对比

二、直播形式

目前直播展示形式,通常以YY直播、映客直播这种页面居多,可以看到其结构可以分成三层:  

① 背景视频层  

② 关注、评论模块  

③ 点赞动画

而现行H5类似直播页面,实现技术难点不大,其可以通过实现方式分为:  

① 底部视频背景使用video视频标签实现播放  

② 关注、评论模块利用 WebScoket 来实时发送和接收新的消息通过DOM 和 CSS3 实现  

③ 点赞利用 CSS3 动画