组件简介
准备工作
环境准备
Android 系统最低版本要求:Android SDK ≥ 21
iOS 系统最低版本要求:iOS version ≥ 12
Flutter SDK 版本:≥ 3.3.0
播放器高级版 License 配置
TUI 短视频属于播放器高级能力,需要使用移动端播放器高级版 License。
使用 TUIPlayer Kit 组件需要使用移动端播放器高级版 License,您可参见 移动端播放器 License 指引来获取。若您已获取对应 License,可前往 腾讯云视立方控制台 > License 管理 > 移动端 License 获取对应 License URL 和 License Key。如果没有申请移动端播放器高级版 License,将会出现视频播放失败、黑屏等现象。
集成 SDK
以下是集成 FTUIPlayerKit 的步骤,您也可以直接参照 example 工程中的代码。
添加依赖
在线依赖方式
在您的
pubspec.yaml 中添加如下依赖:ftuiplayer_kit:git:url: https://github.com/LiteAVSDK/TUIPlayerKit_Flutter
本地依赖方式
1. 下载依赖 到本地,并将
FTUIPlayerKit 复制到项目根目录,也可以根据项目结构需要,复制到其他可访问到的目录。2. 在项目的
pubspec.yaml 中添加依赖,并指定 SDK 的目录,这里以根目录为例:ftuiplayer_kit:path: ./FTUIPlayerKit
获取对应 License URL 和 License Key后,可以通过下面示例代码配置 License:
FTUIPlayerConfig config = FTUIPlayerConfig(licenseUrl: LICENSE_URL,licenseKey: LICENSE_KEY);FTUIPlayerKitPlugin.setTUIPlayerConfig(config);
设置混淆规则
在 proguard-rules.pro 文件中,将 SDK 相关类加入不混淆名单:
-keep class com.tencent.** { *; }
使用指引
创建 TUI 短视频对象
FTUIPlayerShortController _shortPlayerController = FTUIPlayerShortController();
加载数据
加载数据之后,SDK 内会对视频资源做预处理操作。
_shortPlayerController.setModels(sources);
根据项目需求设置点播策略
_shortPlayerController.setVodStrategy(FTUIPlayerVodStrategy());
在 PageView 或者其他 Page 组件中,集成绑定和预创建操作
页面创建示例代码:
itemBuilder: (context, index) {// Prevent duplicate creationWeakReference<ShortVodItemControlView>? cacheView = _playerViews[index];ShortVodItemControlView itemControlView;if (null == cacheView || null == cacheView.target) {FTUIPlayerView playerView = FTUIPlayerView();itemControlView = ShortVodItemControlView(playerView, sources[index]);_playerViews[index] = WeakReference(itemControlView);} else {itemControlView = cacheView.target!;}if (_isSetModeled && index == 0) {_isSetModeled = false;onPageChanged(index);} else {_shortPlayerController.preCreateVodPlayer(itemControlView.playerView, index);}return itemControlView;})),
页面发生变动示例代码:
void onPageChanged(int index) async {ShortVodItemControlView itemControlView = getFTUIPlayerView(index);_currentVodController = await _shortPlayerController.bindVodPlayer(itemControlView.playerView, index);itemControlView.playerController = _currentVodController;// start play after bindingawait _shortPlayerController.startCurrent();}
接口描述
FTUIPlayerKitPlugin
setTUIPlayerConfig
配置当前 TUI 短视频所需要的 License,以及配置是否开启和关闭 TUI 短视频相关的日志打印。
示例:
FTUIPlayerConfig config = FTUIPlayerConfig(licenseUrl: LICENSE_URL,licenseKey: LICENSE_KEY);FTUIPlayerKitPlugin.setTUIPlayerConfig(config);
FTUIPlayerShortController
setModels
填充数据接口,使用该接口会清空数据并设置当前传入的数据。
示例:
_playerController.setModels(dataList);
返回值:
0 :无错误。
100100 :鉴权失败。
appendModels
追加数据接口,用于给当前 TUI 视频列表追加数据。
示例:
_playerController.appendModels(dataList);
返回值:
0 :无错误。
100100 :鉴权失败。
setVodStrategy
设置 TUI 短视频点播策略。目前提供的配置含义如下:
参数 | 类型 | 描述 |
preloadCount | int | 最大预下载并发数量,不建议设置太大,会影响当前视频播放的网速。 |
preDownloadSize | double | 预下载大小,不建议设置太大,尽快完成预下载,单位 MB。 |
preloadBufferSizeInMB | double | 最大预播放缓冲大小,大小不能超过 preDownloadSize,否则预下载缓存会失效,单位 MB。 |
maxBufferSize | double | 播放过程中的最大缓冲大小,单位 MB。 |
preferredResolution | int | 视频播放偏好分辨率。 |
progressInterval | int | 视频进度回调间隔,默认 500毫秒,单位 ms。 |
renderMode | int | 点播视频平铺模式。 0:代表铺满容器。 1:代表跟随视频比例调整。 |
enableSuperResolution | bool | 是否开启超分。 true:开启。 false:关闭。 |
示例:
_playerController.setVodStrategy(FTUIPlayerVodStrategy());
bindVodPlayer
绑定当前页面,绑定当前页面后,将会获得对页面播放器的控制对象,播放器也会处于即将播放状态。
示例:
TUIVodPlayerController vodController = await _shortPlayerController.bindVodPlayer(itemControlView.playerView, index);
preCreateVodPlayer
预创建播放器,预创建的播放器会提前预加载视频,并在加载成功后将首帧画面渲染到预创建的纹理上,后续在使用 bindVodPlayer 的时候,会极大提升起播速度。
示例:
_shortPlayerController.preCreateVodPlayer(itemControlView.playerView, index);
startCurrent
将当前正在绑定的视频启动播放。
示例:
await _shortPlayerController.startCurrent();
返回值:
0 :无错误。
100100 :鉴权失败。
release
释放当前 TUI 短视频控制对象。
释放之后的 FTUIPlayerShortController 将无法继续使用。
示例:
_shortPlayerController.release();
TUIVodPlayerController
startPlay
播放指定视频源。
示例:
_currentVodController.startPlay(souce);
pause
暂停视频
示例:
_currentVodController.pause();
resume
续播视频。
示例:
_currentVodController.resume();
setRate
设置当前视频播放速率。
示例:
_currentVodController.setRate(1.0);
setMute
设置当前视频是否静音播放。
示例:
_currentVodController.setMute(true);
seekTo
将当前视频的播放进度跳转到指定位置,单位:秒,传递浮点类型参数。
示例:
_currentVodController.seekTo(1.0);
getDuration
获得当前正在播放视频的总时长,单位:秒。
示例:
double videoDuration = await _currentVodController.getDuration();
getCurrentPlayTime
获得当前正在播放视频的播放进度,单位:秒。
示例:
double curPlayTime = await _currentVodController.getCurrentPlayTime();
isPlaying
当前视频是否处于播放状态。
示例:
double curPlayTime = await _currentVodController.isPlaying();
addListener
添加播放器事件监听。
示例:
playerController?.addListener(FTUIVodControlListener(onVodPlayerEvent: (event) {// player event callback, for related constants, please refer to TXVodPlayEvent.int eventCode = event[TXVodPlayEvent.EVT_EVENT];},onVodControllerBind: () {// slide to the current video},onVodControllerUnBind: () {// the current video has been swiped away; you can perform some resource release operations.}));
removeListener
移除播放器事件监听。
示例:
widget.playerController?.removeListener(listener);
clearListener
清空播放器事件监听。
示例:
widget.playerController?.clearListener();