拉流端直播xgplayer使用经验

一、背景介绍

为了强化官方验的心智，平台要做一版新的质检直播间，将我们的质检车间全方位透明的展现给用户。按照产品的设计来实现的话，其实就是将各个镜头的内容同时在一个页面内进行播放，除了工作时间的直播，还有休息时间的录播播放。不过直播和录播的生成都是在后端实现，前端只负责视频资源的播放。

二、前期调研

对于简单的直播场景，我们需要关注的主要是「编解码格式」和「直播协议」，因为这两点直接决定直播能否播放。

「编解码格式：」视频的编码方式决定了视频的压缩方式，同样的需要对应的解码格式才能正常播放视频。但视频编码这个过程是在推流端做的，通常会采用H.264，目前基本上所有的播放器和浏览器都支持该解码方式，其兼容性基本不用考虑；所以虽然视频的编解码格式很重要，但只要没有特殊的场景如4k，一般无需过多考虑。

「拉流端直播协议：」不同的直播协议，其兼容性和直播效果有一些差异，而前端对兼容性的差异是敏感的，所以对于Web端，尽量选择兼容性最佳的HLS。

以下是我了解到的不同直播协议的特点及他们的优劣势：

「RTMP」

特点/优点：

1.基于TCP长连接，不需要多次建连，延时低，通常只有1~3s；2.技术成熟，配套完善。

缺点：

1.兼容性差，需要依赖flash，因此无法在移动端使用。2.容易被防火墙拦截。

「HLS」

特点/优点：

1.其工作原理是切片式传输，把直播流切成无数片，用户在观看视频时，每次客户端可以只下载一部分；2.基于 HTTP协议，所以接入CDN较为容易，很少被防火墙拦下；3.自带多码率自适应；4.几乎支持所有设备；

缺点：

1.延时较大，通常不低于10s；2.大量的TS片文件，会造成服务器存储和请求的压力；

「HTTP-FLV」

特点/优点：

1.把音视频数据封装成FLV，然后通过HTTP连接传输，与RTMP相比只是传输协议变了，能有效避免防火墙和代理的影响；2.低延时，整体效果与RTMP非常接近；

缺点：

1.它的传输特性会让流媒体资源缓存在本地客户端，保密性较差；2.不支持IOS；

三、为什么使用xgPlayer

在确定了我所需要使用的直播协议后，我调研了一些社区推荐的播放器：tcplayer.js、xgplayer、DPlayer、plyr、ArtPlayer.js、Video.js。

其实以上的播放器在功能上都可以满足我的需求，并且也都支持H.264编码格式；在直播能力的支持上也都会在底层依赖hls.js，flv.js，不过像tcplayer和xgplayer还单独包了一层，使得直播的实现更加的符合播放器的体系；

在我所调研的播放器里xgPlayer的文档是最清晰和完善的，并且xgPlayer使用插件机制，所有功能均可插拔，而且支持自定义扩展能力，十分方便，所以在开发体验上我认为更胜一筹。

四、基本使用

1.初始化

import Player from 'xgplayer'
import FlvPlugin from 'xgplayer-flv'
import "xgpla