tencent cloud

Video on Demand

Agreements
Service Level Agreement
Kebijakan VOD
Kebijakan Privasi
Perjanjian Pemrosesan dan Keamanan Data
DokumentasiVideo on Demand

Flutter

Mode fokus
Ukuran font
Terakhir diperbarui: 2025-10-28 11:25:33

Component Introduction

FTUIPlayerKit is a Flutter version TUI short video component based on the native component TUIPlayerKit. It supports ultra-fast first frame and smooth sliding, providing a high-quality playback experience.

Preparations

Preparing the Environment

Minimum version requirement for Android system: Android SDK ≥ 21
Minimum version requirement for iOS system: IOS version ≥ 12
Flutter SDK version: ≥ 3.3.0

Apply for the Advanced Player License

To use the TUIPlayer Kit component, you need to use the Advanced Mobile Player License. You can refer to the advanced version of the mobile player License to obtain it. If you have already obtained the corresponding License, you can go to Tencent Cloud Visual Cube Console > License Management > Mobile License to get the corresponding LicenseURL and LicenseKey. If you have not applied for the Advanced Mobile Player License, issues such as video playback failure and black screen may occur.

Integrating the SDK

Here are the steps to integrate FTUIPlayerKit. You can also refer to the code in the example project directly.

Adding Dependencies

Online dependency method

Add the following dependency in your pubspec.yaml :
ftuiplayer_kit:
  git:
    url: https://github.com/LiteAVSDK/TUIPlayerKit_Flutter

Local dependency method

1. Download the dependency locally and copy FTUIPlayerKit to the project root directory. Alternatively, based on the project structure needs, it can be copied to other accessible directories.
2. Add the dependency in the project's pubspec.yaml and designate the SDK directory, using the root directory as an example here.
  ftuiplayer_kit:
    path: ./FTUIPlayerKit
After obtaining the corresponding LicenseURL and LicenseKey, you can configure the License through the following instance code:
FTUIPlayerConfig config = FTUIPlayerConfig(
    licenseUrl: LICENSE_URL,
    licenseKey: LICENSE_KEY);
FTUIPlayerKitPlugin.setTUIPlayerConfig(config);

Configuring Obfuscation Rules

In the proguard-rules.pro file, add the SDK-related classes to the non-obfuscation list:
-keep class com.tencent.** { *; }

User Guide

Creating a TUI Short Video Object

FTUIPlayerShortController _shortPlayerController = FTUIPlayerShortController();

Loading Data

_shortPlayerController.setModels(sources);
After loading data, the SDK preprocesses video resources.

Set VOD Policy Based on Project Requirements

_shortPlayerController.setVodStrategy(FTUIPlayerVodStrategy());

Integrating Bind and Precreation in PageView or Other Page Components

Example code for page creation:
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;
          })),
Example code for webpage changes:
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();
}

API Description

FTUIPlayerKitPlugin

setTUIPlayerConfig

Configure the necessary license for the current TUI short video and whether to enable and disable related log printing for TUI short video.
Example:
FTUIPlayerConfig config = FTUIPlayerConfig(
    licenseUrl: LICENSE_URL,
    licenseKey: LICENSE_KEY);
FTUIPlayerKitPlugin.setTUIPlayerConfig(config);

FTUIPlayerShortController

setModels

Fill data API. Using this API will clear data and set the current input data.
Example:
_playerController.setModels(dataList);
Return Value:
0: No error.
100100: Authentication failed.

appendModels

Append data API for adding data to the current TUI video list
Example:
 _playerController.appendModels(dataList);
Return Value:
0: No error.
100100: Authentication failed.

setVodStrategy

Set TUI short video on-demand policy.
The meanings of the current configuration are as follows.
name
type
desc
preloadCount
int
Maximum preload concurrency limit. Setting it too high is not recommended as it may impact the network speed for current video playback.
preDownloadSize
double
Preload size. Setting it too high is not recommended. Complete preloading as soon as possible. Unit: MB.
preloadBufferSizeInMB
double
Maximum playback buffer size, must not exceed preDownloadSize, otherwise the download cache will be invalid. Unit: MB.
maxBufferSize
double
Maximum buffer size during playback. Unit: MB.
preferredResolution
int
Preferred resolution for video playback
progressInterval
int
Video progress callback interval, default 500 ms. Unit: ms.
renderMode
int
On-demand video tiling mode. 0 represents fill container, 1 represents follow video ratio adjust.
enableSuperResolution
bool
Whether super resolution is enabled.
true: enabled.
false: disabled.
Example:
_playerController.setVodStrategy(FTUIPlayerVodStrategy());

bindVodPlayer

Bind the current page. After binding, you will obtain the control object of the page player, and the player will already be in playback status.
Example:
TUIVodPlayerController vodController = await _shortPlayerController.bindVodPlayer(itemControlView.playerView, index);

preCreateVodPlayer

Precreate a player. The precreated player will preload the video in advance and render the first frame to the precreated texture after loading successfully. When using bindVodPlayer subsequently, it will significantly improve the startup speed.
Example:
_shortPlayerController.preCreateVodPlayer(itemControlView.playerView, index);

startCurrent

Start playing the video currently being bound
Example:
await _shortPlayerController.startCurrent();
Return Value:
0: No error.
100100: Authentication failed.

release

Release the current TUI short video control object.
The FTUIPlayerShortController will no longer usable after release
Example:
_shortPlayerController.release();

TUIVodPlayerController

startPlay

Play the specified video
Example:
_currentVodController.startPlay(souce);

pause

Pause video
Example:
_currentVodController.pause();

resume

Resume video
Example:
_currentVodController.resume();

setRate

Set current video playback speed
Example:
_currentVodController.setRate(1.0);

setMute

Set whether to mute current video playback
Example:
_currentVodController.setMute(true);

seekTo

Jump the progress of the play to the specified position, unit: second, transmit floating point type parameter
Example:
_currentVodController.seekTo(1.0);

getDuration

Get the total duration of the video currently playing, unit: second
Example:
double videoDuration = await _currentVodController.getDuration();

getCurrentPlayTime

Get the progress of the video currently playing, unit: second
Example:
double curPlayTime = await _currentVodController.getCurrentPlayTime();

isPlaying

Check if the current video is in playback status
Example:
double curPlayTime = await _currentVodController.isPlaying();

addListener

Add player event listener
Example:
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

Remove player event listener
Example:
widget.playerController?.removeListener(listener);

clearListener

Clear player event listener
Example:
widget.playerController?.clearListener();
Topik selanjutnya: Service Level Agreement

Bantuan dan Dukungan

Apakah halaman ini membantu?

masukan