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