播放器 SDK 直播场景（Flutter）

一、基础知识

这里说明视频云 SDK 的直播播放功能，在此之前，先了解如下一些基本知识会大有裨益：

·直播和点播
直播（LIVE）的视频源是主播实时推送的。因此，主播停止推送后，播放端的画面也会随即停止，而且由于是实时直播，所以播放器在播直播 URL 的时候是没有进度条的。

点播（VOD）的视频源是云端的一个视频文件，只要未被从云端移除，视频就可以随时播放， 播放中你可以通过进度条控制播放位置，腾讯视频和优酷土豆等视频网站上的视频观看就是典型的点播场景。

·协议的支持
通常使用的直播协议如下，App 端推荐使用 FLV 协议的直播地址（以“http”打头，以“.flv”结尾）：

二、特别说明

·是否有限制？
视频云 SDK 不会对播放地址的来源做限制，即你可以用它来播放腾讯云或非腾讯云的播放地址。但视频云 SDK 中的播放器只支持 FLV 、RTMP 和 HLS（m3u8）三种格式的直播地址，以及 MP4、HLS（m3u8）和 FLV 三种格式的点播地址。

·历史因素
SDK 早期版本只有 TXLivePlayer 一个 Class 承载直播和点播功能，但是由于点播功能越做越多，我们最终在 SDK 3.5版本开始，将点播功能单独分离出来，交由 TXVodPlayer 来负责。但是为了保证编译通过，你在 TXLivePlayer 中依然可以看到类似 seek 等点播才具备的功能。

四、step 1: 创建 Player

视频云 SDK 中的 TXLivePlayer 模块负责实现直播播放功能。对应于 Flutter 是 TXLivePlayerController。

TXLivePlayerController controller = TXLivePlayerController();

五、step 2: 渲染 View

接下来我们要给播放器的视频画面找个地方来显示，Flutter 系统中使用 Widget 作为基本的界面渲染单位，所以你只需要准备一个 Widget 并调整好布局就可以了。你可以直接使用 TXPlayerVideo 或者继承它来显示，也可以参考源码实现自定义视图。

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('直播'), ), body: SafeArea( child: Column( children: [ Container( height: 150, color: Colors.black, child: Center( child: _aspectRatio>0?AspectRatio( aspectRatio: _aspectRatio, child: TXPlayerVideo( onRenderViewCreatedListener: (viewId) { _controller.setPlayerView(viewId); }, ), ):Container(), ), ),], ), ), ); }

六、step 3: 启动播放

String flvUrl = "http://liteavapp.qcloud.com/live/liteavdemoplayerstreamid_demo1080p.flv";await _controller.startLivePlay(flvUrl);// 如果你使用的是 12.0 的以下版本，需要传入 playType，示例如下：await _controller.startLivePlay(flvUrl, playType: TXPlayType.LIVE_FLV);

注意：如果你集成的是 12.0 (不包括 12.0) 以下的版本，播放直播流的时候，需要传入 playType。

playType含义如下表：

注意：说明：

注意：关于 HLS（m3u8），在 App 上我们不推荐使用 HLS 这种播放协议播放直播视频源（虽然它很适合用来做点播），因为延迟太高，在 App 上推荐使用 LIVE_FLV 或者 LIVE_RTMP 播放协议。

七、step 4: 暂停播放

对于直播播放而言，并没有真正意义上的暂停，所谓的直播暂停，只是画面冻结和关闭声音，而云端的视频源还在不断地更新着，所以当你调用 resume 的时候，会从最新的时间点开始播放，这跟点播是有很大不同的（点播播放器的暂停和继续与播放本地视频文件时的表现相同）。

// 暂停_controller.pause();// 恢复_controller.resume();

八、step 5: 结束播放

// 停止播放_controller.stop();

九、step 7: 消息接收

此功能可以在推流端将一些自定义 message 随着音视频线路直接下发到观众端，适用场景例如：

·冲顶大会：推流端将题目下发到观众端，可以做到“音-画-题”完美同步。

·秀场直播：推流端将歌词下发到观众端，可以在播放端实时绘制出歌词特效，因而不受视频编码的降质影响。

·在线教育：推流端将激光笔和涂鸦操作下发到观众端，可以在播放端实时地划圈划线。

通过如下方案可以使用此功能：

通过 onPlayerEventBroadcast 监听消息，消息编号：PLAY_EVT_GET_MESSAGE （2012）。

_controller.onPlayerEventBroadcast.listen((event) {//订阅事件分发 if(event["event"] == 2012) { String msg = event["EVT_GET_MSG"]; }});

十、step 8: 清晰度无缝切换

日常使用中，网络情况在不断发生变化。在网络较差的情况下，最好适度降低画质，以减少卡顿；反之，网速比较好，可以观看更高画质。
传统切流方式一般是重新播放，会导致切换前后画面衔接不上、黑屏、卡顿等问题。使用无缝切换方案，在不中断直播的情况下，能直接切到另条流上。

清晰度切换在直播开始后，任意时间都可以调用。调用方式如下：

// 正在播放的是流http://5815.liveplay.myqcloud.com/live/5815_62fe94d692ab11e791eae435c87f075e.flv，// 现切换到码率为 900kbps 的新流上_controller.switchStream("http://5815.liveplay.myqcloud.com/live/5815_62fe94d692ab11e791eae435c87f075e_900.flv");

注意：说明：

注意：清晰度无缝切换功能需要在后台配置 PTS 对齐，如你需要可 提交工单 申请使用。

十一、延时调节

腾讯云 SDK 的直播播放功能，并非基于 ffmpeg 做二次开发， 而是采用了自研的播放引擎，所以相比于开源播放器，在直播的延迟控制方面有更好的表现，我们提供了三种延迟调节模式，分别适用于：秀场，游戏以及混合场景。

·三种模式的特性对比见下表：

·三种模式的对接代码如下：

// 自动模式_controller.setLiveMode(TXPlayerLiveMode.Automatic);// 极速模式_controller.setLiveMode(TXPlayerLiveMode.Speed);// 流畅模式_controller.setLiveMode(TXPlayerLiveMode.Smooth);// 设置完成之后再启动播放

注意：说明：

注意：更多关于卡顿和延迟优化的技术知识，可以阅读 视频卡顿怎么办？

十二、功能使用

下文将介绍常见直播播放功能的使用方式。

十三、1、暂停播放

对于直播播放而言，并没有真正意义上的暂停，所谓的直播暂停，只是画面冻结和关闭声音，而云端的视频源还在不断地更新着，所以当你调用 resume 的时候，会从最新的时间点开始播放，这跟点播是有很大不同的（点播播放器的暂停和继续与播放本地视频文件时的表现相同）。

// 暂停_controller.pause();// 继续_controller.resume();

十四、2、消息接收

此功能可以在推流端将一些自定义 message 随着音视频线路直接下发到观众端，适用场景如下：

·冲顶大会：推流端将题目下发到观众端，可以做到“音-画-题”完美同步。

·秀场直播：推流端将歌词下发到观众端，可以在播放端实时绘制出歌词特效，因而不受视频编码的降质影响。

·在线教育：推流端将激光笔和涂鸦操作下发到观众端，可以在播放端实时地划圈划线。

通过如下方案可以使用此功能：

·FTXLivePlayConfig 中的 enableMessage 开关置为 true。

·TXLivePlayerController 通过 onPlayerEventBroadcast 监听消息，消息编号：PLAY_EVT_GET_MESSAGE（2012）

_controller.onPlayerEventBroadcast.listen((event) { if (event["event"] == TXVodPlayEvent.PLAY_EVT_GET_MESSAGE) { String msg = event[TXVodPlayEvent.EVT_GET_MSG]; } else if (event["event"] == TXVodPlayEvent.PLAY_ERR_NET_DISCONNECT) { print("网络断开，拉流失败"); }});

十五、3、清晰度无缝切换

日常使用中，网络情况在不断发生变化。在网络较差的情况下，最好适度降低画质，以减少卡顿；反之，网速比较好，可以观看更高画质。
传统切流方式一般是重新播放，会导致切换前后画面衔接不上、黑屏、卡顿等问题。使用无缝切换方案，在不中断直播的情况下，能直接切到另一条流上。

清晰度切换在直播开始后，任意时间都可以调用。调用方式如下：

// 正在播放的是流 http://5815.liveplay.myqcloud.com/live/5815_62fe94d692ab11e791eae435c87f075e.flv，// 现切换到码率为900kbps的新流上_controller.switchStream("http://5815.liveplay.myqcloud.com/live/5815_62fe94d692ab11e791eae435c87f075e_900.flv");

注意：说明：

注意：清晰度无缝切换功能需要在后台配置 PTS 对齐，如你需要可 提交工单 申请使用。

十六、4、延时调节

腾讯云 SDK 的直播播放（LVB）功能，并非基于 ffmpeg 做二次开发， 而是采用了自研的播放引擎，所以相比于开源播放器，在直播的延迟控制方面有更好的表现，我们提供了三种延迟调节模式，分别适用于：秀场、游戏以及混合场景。

·三种模式的特性对比

·三种模式的对接代码

//自动模式_controller.setCacheParams(1, 5);//极速模式_controller.setCacheParams(1, 1);//流畅模式_controller.setCacheParams(5, 5);

注意：说明：

注意：更多关于卡顿和延迟优化的技术知识，可以阅读 视频卡顿怎么办？

十七、5、获取视频信息

播放器 SDK 通过 URL 字符串播放视频，URL 中本身不包含视频信息。为获取相关信息，需要通过访问云端服务器加载到相关视频信息，因此 SDK 只能以事件通知的方式将视频信息发送到你的应用程序中，更多内容参见 事件监听。

例如你可以通过onPlayerNetStatusBroadcast的NET_STATUS_VIDEO_WIDTH和NET_STATUS_VIDEO_HEIGHT获取视频的宽和高。具体使用方法见 状态反馈（onPlayerNetStatusBroadcast）。

十八、6、进入画中画

目前双端均支持画中画能力，其中 Android 端可以传递自定义窗口图片，大小限制为 1MB，不传则使用默认图标。iOS 直播画中画需要高级版 SDK 权限：

_playerController.enterPictureInPictureMode( backIconForAndroid: backIconForAndroid, playIconForAndroid: playIconForAndroid, pauseIconForAndroid: pauseIconForAndroid, forwardIconForAndroid: forwardIconForAndroid);

flutter iOS 端使用直播画中画，必须需要高级版能力支持，以及需要添加相应资源文件，详情可参考 iOS 高级画中画能力。

十九、7、绑定纹理

build 中布局了 TXPlayerVideo 后，需要与播放器绑定才能将画面显示在 TXPlayerVideo 中，示例如下：

controller.setPlayerView(viewId);

20、8、设置平铺模式

controller 提供了两种平铺模式，一种是按照视频比例优先展示完整画面 FTXPlayerRenderMode.ADJUST_RESOLUTION ，另外一种是按照视频比例，铺满容器 FTXPlayerRenderMode.FULL_FILL_CONTAINER 。示例如下：

_controller.setRenderMode(FTXPlayerRenderMode.ADJUST_RESOLUTION);

21、事件监听

你可以对 TXLivePlayerController 的 onPlayerEventBroadcast和 onPlayerNetStatusBroadcast进行监听，之后 SDK 的内部状态信息均会通过 onPlayerEventBroadcast（事件通知）和 onPlayerNetStatusBroadcast（状态反馈）通知给你。

23、1. 播放事件

不要在收到 PLAY_LOADING 后隐藏播放画面：因为 PLAY_LOADING -> PLAY_BEGIN 的时间长短是不确定的，可能是5s或5ms，有些用户考虑在 LOADING 时隐藏画面， BEGIN 时显示画面，会造成严重的画面闪烁（尤其是直播场景下）。推荐的做法是在视频播放画面上叠加一个半透明的 loading 动画。

24、2. 结束事件

注意：如何判断直播已结束？
基于各种标准的实现原理不同，很多直播流通常没有结束事件（2006）抛出，此时可预期的表现是：主播结束推流后，SDK 会很快发现数据流拉取失败（PLAY_WARNING_RECONNECT），然后开始重试，直至三次重试失败后抛出 PLAY_ERR_NET_DISCONNECT 事件。

因此，2006和-2301都要监听，用来作为直播结束的判定事件。

25、3. 警告事件

如下的这些事件你可以不用关心，它只是用来告知你 SDK 内部的一些事件。

26、状态反馈（onPlayerNetStatusBroadcast）

通知每秒都会被触发一次，目的是实时反馈当前的推流器状态，它就像汽车的仪表盘，可以告知你目前 SDK 内部的一些具体情况，以便你能对当前网络状况和视频信息等有所了解。