三、环境准备
·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();}
十七、setTUIPlayerConfig
配置当前 TUI 短视频所需要的 License,以及配置是否开启和关闭 TUI 短视频相关的日志打印。
示例:
FTUIPlayerConfig config = FTUIPlayerConfig( licenseUrl: LICENSE_URL, licenseKey: LICENSE_KEY);FTUIPlayerKitPlugin.setTUIPlayerConfig(config);
十九、setModels
填充数据接口,使用该接口会清空数据并设置当前传入的数据。
示例:
_playerController.setModels(dataList);
返回值:
·0 :无错误。
·100100 :鉴权失败。
20、appendModels
追加数据接口,用于给当前 TUI 视频列表追加数据。
示例:
_playerController.appendModels(dataList);
返回值:
·0 :无错误。
·100100 :鉴权失败。
21、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());
22、bindVodPlayer
绑定当前页面,绑定当前页面后,将会获得对页面播放器的控制对象,播放器也会处于即将播放状态。
示例:
TUIVodPlayerController vodController = await _shortPlayerController.bindVodPlayer(itemControlView.playerView, index);
23、preCreateVodPlayer
预创建播放器,预创建的播放器会提前预加载视频,并在加载成功后将首帧画面渲染到预创建的纹理上,后续在使用 bindVodPlayer 的时候,会极大提升起播速度。
示例:
_shortPlayerController.preCreateVodPlayer(itemControlView.playerView, index);
24、startCurrent
将当前正在绑定的视频启动播放。
示例:
await _shortPlayerController.startCurrent();
返回值:
·0 :无错误。
·100100 :鉴权失败。
25、release
释放当前 TUI 短视频控制对象。
释放之后的 FTUIPlayerShortController 将无法继续使用。
示例:
_shortPlayerController.release();
27、startPlay
播放指定视频源。
示例:
_currentVodController.startPlay(souce);
28、pause
暂停视频
示例:
_currentVodController.pause();
29、resume
续播视频。
示例:
_currentVodController.resume();
30、setRate
设置当前视频播放速率。
示例:
_currentVodController.setRate(1.0);
31、setMute
设置当前视频是否静音播放。
示例:
_currentVodController.setMute(true);
32、seekTo
将当前视频的播放进度跳转到指定位置,单位:秒,传递浮点类型参数。
示例:
_currentVodController.seekTo(1.0);
33、getDuration
获得当前正在播放视频的总时长,单位:秒。
示例:
double videoDuration = await _currentVodController.getDuration();
34、getCurrentPlayTime
获得当前正在播放视频的播放进度,单位:秒。
示例:
double curPlayTime = await _currentVodController.getCurrentPlayTime();
35、isPlaying
当前视频是否处于播放状态。
示例:
double curPlayTime = await _currentVodController.isPlaying();
36、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. }));
37、removeListener
移除播放器事件监听。
示例:
widget.playerController?.removeListener(listener);
38、clearListener
清空播放器事件监听。
示例:
widget.playerController?.clearListener();