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(适合入门者快速上手)

三、客户端怎么去播放

有了以上的基本知识,有了多种类型的推流地址,

这个时候就是,你要怎么去播放这些流了,怎么让播放器根据客户端的类型,去选择最优类的流去播放,

比如在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

上一篇:记录一下对swiper4.x.js在H5单页中的滑动优化


下一篇:javaWEB总结(10):HttpServlet成长史