播放器 SDK Flutter(短视频组件 TUIPlayerShortVideo )

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

相关产品
播放器 SDK 产品页,含版本规格、价格与购买入口。

三、环境准备

·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();

赞 (0)
上一篇 4天前
下一篇 4天前