Flutter

最近更新时间:2025-10-22 17:22:12

我的收藏

组件简介

FTUIPlayerKit 是基于原生组件 TUIPlayerKit 封装的 Flutter 版本 TUI 短视频组件,支持视频极速首帧和流畅滑动,提供优质播放体验的短视频组件。

准备工作

环境准备

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 creation
WeakReference<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 binding
await _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();