pc/移动端(手机端)浏览器的直播rtmp hls(适合入门者快速上手)
一、直播概述
关于直播,大概的过程是:推流端——>源站——>客户端拉流,用媒介播放
客户端所谓的拉流就是一个播放的地址url,会有多种类型的流:
视频直播服务目前支持三种直播协议,分别是RTMP、HLS、FLV :
(1)RTMP: 实时消息传输协议,
但是需要 flash 插件的支持,则是,手机浏览器是无法支持的。跟其他因素无关,这种类型的流就是无法在手机浏览器播放。
(2)HLS 协议:基于HTTP协议的流直播(wikipedia)
。它可以基于h5的video标签播放,所以只要支持h5就能支持hls这种推流,就是说它在大部分手机浏览器的支持度是很好的,但是有个致命的痛点就是延迟很大,会是10S以上,所以要实现在直播的过程中实现互动就很尴尬,所以适合仅仅看直播的业务。(文件是m3u8格式)
(3)HTTP-FLV :协议由 Adobe 公司主推,格式极其简单,只是在大块的视频帧和音视频头部加入一些标记头信息,由于这种极致的简洁,在延迟表现和大规模并发方面都很成熟。唯一的不足就是在手机浏览器上的支持非常有限,但是用作手机端 APP 直播协议却异常合适。
综上: 你可以用rtmp协议的流实现在pc端的直播,用hls协议实现在手机端浏览器的直播。 毕竟rtmp的延时小,所以能用rtmp就不要hls
视频的在客户端的优先顺序最好是:
* mobile :m3u8>mp4
* PC :RTMP>flv>m3u8>mp4
二、后台给你一个健康的流地址
本人被坑了半天,后台给了一个在腾讯云生成的拉流地址,结果用了各种方式去播放,还是播放不了,问了腾讯云的技术人员无结果,腾讯云人还给网页端的demo,在各个demo上去测试,其实。。。。。。。。。
你只要下载VLC一个软件,支持多种类型的流播放器,你把地址放到这上面,就能检测出给你拉流地址是否健康。
而后,后台通过在腾讯云提交工单,才发现pc的推流,需要加防盗链,推流跟拉流都需要。
三、客户端怎么去播放
有了以上的基本知识,有了多种类型的推流地址,
这个时候就是,你要怎么去播放这些流了,怎么让播放器根据客户端的类型,去选择最优类的流去播放,
比如在pc,即使rtmp和hls都可以播放,但是hls延迟高,还是选择rpmp播放
这个时候vedio.js 跟腾讯云的两个播放器早就帮你做好了这些事:
1、videojs
关于videojs,网上有很多demo,本人百度了那么多后,比较直接的资料如下:
videojs: (1)官方文档:http://docs.videojs.com/tutorial-options.html#height
(2)vue总应用:https://www.npmjs.com/package/vue-video-player https://github.com/savokiss/vue-videojs-demo
(3)播放需要flash的流:https://github.com/videojs/videojs-flash
(4)播放hls的流:https://github.com/videojs/videojs-contrib-hls
2、腾讯的TCplayer,还有Web直播播放器1.0
(1)TCplayer: https://cloud.tencent.com/document/product/267/7479
(2)Web直播播放器1.0: https://cloud.tencent.com/document/product/267/5704
备注:
目前为止,咨询了腾讯云的技术人员,暂时这两个播放器都可以实现直播,但是坑的是:
TCplaer没有弹幕功能,但是有controls参数,可以隐藏视频底部的工具栏,而
Web直播播放器1.0有弹幕,但没有controls参数
总结:
试过了这几种播放效果,最后还是选择了TCplaer,而没有用vediojs,因为在手机播放的时候,vediojs出现开始播放的播放按钮一直卡住loding的状态,而TC比较顺畅,不知道是不是跟我们后台的流是后台推流的有关,待验证
稍微,可能会做一个demo,可以让大家直观的看到两个播放器的差别
现在看来,大家只要把腾讯云关于直播的文档认真看一两遍,估计很多就理清了https://cloud.tencent.com/document/product/267
借鉴:WEB直播技术入门及在 Vue 中应用 video.js