tencent cloud

Video on Demand

動向とお知らせ
製品アップデート情報
製品紹介
製品概要
Product Features
製品の機能
製品の強み
ユースケース
ソリューション
購入ガイド
課金概要
課金方式
購入ガイドライン
請求書の照会
支払い更新の説明
支払い延滞の説明
返金説明
クイックスタート
コンソールガイド
コンソールの説明
サービスの概要
アプリケーション管理
メディア管理
リソースパック管理
License Management
プラクティスチュートリアル
メディアのアップロード
オンデマンドメディアファイルのインテリジェントコールド化方法
ビデオ処理
配信と再生
イベント通知の受信方法
オリジンサーバーのマイグレーションツール
Live Recording
カスタムオリジンサーバーback-to-originの方法
ライブストリーミングハイライトクリップを VOD に永続化するためのガイド
EdgeOne を使用して VOD コンテンツを配信する方法
開発ガイド
メディアアップロード
メディア加工処理
ビデオAI
イベント通知
ビデオ再生
メディアファイルのダウンロード
サブアプリケーションシステム
エラーコード
Player+ドキュメント
Overview
Basic Concepts
Features
Free Demo
Free Trial License
Purchase Guide
SDK Download
Licenses
Player Guide
Integration (UI Included)
Integration (No UI)
Advanced Features
API Documentation
Player Adapter
Player SDK Policy
よくあるご質問
モバイル端末再生に関するご質問
料金
ビデオのアップロード
ビデオの公開
ビデオの再生
Web側の再生
全画面表示再生
データ統計
CAM関連
メディア資産冷却に関する質問
Agreements
Service Level Agreement
VOD ポリシー
プライバシーポリシー
データ処理とセキュリティ契約
お問い合わせ
用語集
ドキュメントVideo on DemandPlayer+ドキュメントAdvanced FeaturesAdvanced Mobile FeaturesTUIPlayerShortVideoFlutter

Flutter

PDF
フォーカスモード
フォントサイズ
最終更新日: 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();
前の記事へ: Android次の記事へ: VR Playback Plugin

ヘルプとサポート

この記事はお役に立ちましたか？

フィードバック