superplayer_widget
directory from the project to your own Flutter project.pubspec.yaml
.superplayer_widget:# The path should be changed according to the location where superplayer_widget is storedpath: ../superplayer_widgetsuper_player:git:url: https://github.com/LiteAVSDK/Player_Flutterpath: Flutterref: main
superPlayer
dependency of superplayer_widget.pubspec.yaml
file of superplayer_widget and make the necessary modifications.super_player:path: ../
super_player:git:url: https://github.com/LiteAVSDK/Player_Flutterpath: Flutterref: main
@override Widget build(BuildContext context) { return MaterialApp( localizationsDelegates: [ SuperPlayerWidgetLocals.delegate,// ...... your app other delegate ], supportedLocales: [ Locale.fromSubtags(languageCode: 'en'), Locale.fromSubtags(languageCode: 'zh'),// ....... other language ],// ...... your app other code ); }
import 'package:superplayer_widget/demo_superplayer_lib.dart';
String licenceURL = ""; // The license URL obtainedString licenceKey = ""; // The license key obtainedSuperPlayerPlugin.setGlobalLicense(licenceURL, licenceKey);
SuperPlayerPlugin.setGlobalEnv("GDPR");
SuperPlayerController _controller = SuperPlayerController(context);
FTXVodPlayConfig config = FTXVodPlayConfig();// If `preferredResolution` is not configured, the 720x1280 resolution stream will be played back preferably during multi-bitrate video playbackconfig.preferredResolution = 720 * 1280;_controller.setPlayConfig(config);
FTXVodPlayConfig
, see the player configuration API of the VOD player SDK for Flutter._controller.onSimplePlayerEventBroadcast.listen((event) {String evtName = event["event"];if (evtName == SuperPlayerViewEvent.onStartFullScreenPlay) {setState(() {_isFullScreen = true;});} else if (evtName == SuperPlayerViewEvent.onStopFullScreenPlay) {setState(() {_isFullScreen = false;});} else {print(evtName);}});
Widget _getPlayArea() {return Container(height: 220,child: SuperPlayerView(_controller),);}
@overrideWidget build(BuildContext context) {return WillPopScope(child: Container(decoration: BoxDecoration(image: DecorationImage(image: AssetImage("images/ic_new_vod_bg.png"),fit: BoxFit.cover,)),child: Scaffold(backgroundColor: Colors.transparent,appBar: _isFullScreen? null: AppBar(backgroundColor: Colors.transparent,title: const Text('SuperPlayer'),),body: SafeArea(child: Builder(builder: (context) => getBody(),),),),),onWillPop: onWillPop);}Future<bool> onWillPop() async {return !_controller.onBackPress();}
SuperPlayerModel model = SuperPlayerModel();model.videoURL = "http://1400329073.vod2.myqcloud.com/d62d88a7vodtranscq1400329073/59c68fe75285890800381567412/adp.10.m3u8";_controller.playWithModelNeedLicence(model);
SuperPlayerModel model = SuperPlayerModel();model.appId = 1500005830;model.videoId = new SuperPlayerVideoId();model.videoId.fileId = "8602268011437356984";// `psign` is a player signature. For more information on the signature and how to generate it, see [Player Signature](https://www.tencentcloud.com/document/product/266/38099).model.videoId.pSign = "psignXXX"_controller.playWithModelNeedLicence(model);
FileId
, and the player will request the backend for the real playback URL. If the network is abnormal or the FileId
doesn't exist, the SuperPlayerViewEvent.onSuperPlayerError
event will be received.startVodPlay
. This can prevent memory leak and screen flashing issues, as well as ensure that playback is stopped when the page is exited.@overridevoid dispose() {// must invoke when page exit._controller.releasePlayer();super.dispose();}
startPlay
is replaced by startVodPlay
, and playback will succeed only after you use {@link SuperPlayerPlugin#setGlobalLicense}
to set the license; otherwise, playback will fail (black screen occurs). The license needs to be set only once globally. You can use the license for CSS, UGSV, or video playback. If you have no such licenses, you can quickly apply for a trial license._controller.playWithModelNeedLicence(model);
Parameter | Type | Description |
appId | int | The application's appId , which is required for playback via fileId . |
videoURL | String | The video URL, which is required for playback via URL. |
multiVideoURLs | List<String> | Multi-bitrate playback URLs, which are required for playback via multi-bitrate URLs. |
defaultPlayIndex | int | The default playback bitrate number, which is used together with multiVideoURLs . |
videoId | SuperPlayerVideoId | The fileId storage object, which is further described below. |
title | String | The video title. You can use this to customize the title and overwrite the title internally requested by the player from the server. |
coverUrl | String | The thumbnail image pulled from the Tencent server, whose value will be assigned automatically in SuperVodDataLoader . |
customeCoverUrl | String | A custom video thumbnail. This parameter is used preferentially and is used to customize the video thumbnail. |
duration | int | The video duration in seconds. |
videoDescription | String | The video description. |
videoMoreDescription | String | The detailed video description. |
playAction | int | Valid values: PLAY_ACTION_AUTO_PLAY, PLAY_ACTION_MANUAL_PLAY, PLAY_ACTION_PRELOAD, as described below. |
Parameter | Type | Description |
fileId | String | The file ID, which is required. |
psign | String | The player signature. For more information on the signature and how to generate it, see Player Signature. |
playWithModel
is called.playWithModel
is called. The player doesn't load the video and only displays the thumbnail image, which consumes no video playback resources compared with PLAY_ACTION_PRELOAD
.playWithModel
is called, but the video will be loaded. This can start the playback faster than PLAY_ACTION_MANUAL_PLAY
._controller.pause();
_controller.resume();
_controller.reStart();
_controller.resetPlayer();
_controller.releasePlayer();
true
is returned, the full screen mode is exited, and the Back button clicking event is consumed; if false
is returned, the event is unconsumed._controller.onBackPress();
_controller.switchStream(videoQuality);
videoQuality
can generally be obtained through _controller.currentQualiyList
(definition list) and _controller.currentQuality
(default definition) after the playback starts. The definition selection capabilities have been integrated into the player. You can click the definition in the bottom-right corner to switch the definition in full screen mode.Parameter | Type | Description |
index | int | The definition number. |
bitrate | int | Bitrate for the definition. |
width | int | The video width for the definition. |
height | int | The video height for the definition. |
name | String | The definition abbreviation. |
title | String | Displayed definition name. |
url | String | The multi-bitrate URL, which is optional. |
_controller.seek(progress);
Parameter | Type | Description |
progress | double | Target time in seconds. |
_controller.setPlayConfig(config);
Parameter | Type | Description |
connectRetryCount | int | The number of player reconnections. If the SDK is disconnected from the server due to an exception, the SDK will attempt to reconnect to the server. |
connectRetryInterval | int | The interval between two player reconnections. If the SDK is disconnected from the server due to an exception, the SDK will attempt to reconnect to the server. |
timeout | int | Player connection timeout period |
playerType | int | Player type. Valid values: 0: VOD; 1: live streaming; 2: live stream replay. |
headers | Map | Custom HTTP headers |
enableAccurateSeek | bool | Whether to enable accurate seek. Default value: true. |
autoRotate | bool | If it is set to true , the MP4 file will be automatically rotated according to the rotation angle set in the file, which can be obtained from the PLAY_EVT_CHANGE_ROTATION event. Default value: true . |
smoothSwitchBitrate | bool | Whether to enable smooth multi-bitrate HLS stream switching. If it is set to false (default), multi-bitrate URLs are opened faster. If it is set to true , the bitrate can be switched smoothly when IDR frames are aligned. |
cacheMp4ExtName | String | The cached MP4 filename extension. Default value: mp4 . |
progressInterval | int | Progress callback interval in ms. If it is not set, the SDK will call back the progress once every 0.5 seconds. |
maxBufferSize | int | The maximum size of playback buffer in MB. The setting will affect playableDuration . The greater the value, the more the data that is buffered in advance. |
maxPreloadSize | int | Maximum preload buffer size in MB |
firstStartPlayBufferTime | int | Duration of the video data that needs to be loaded during the first buffering in ms. Default value: 100 ms |
nextStartPlayBufferTime | int | The minimum buffered data size to stop buffering (secondary buffering for insufficient buffered data or progress bar drag buffering caused by seek ) in milliseconds. Default value: 250 ms |
overlayKey | String | The HLS security enhancement encryption and decryption key. |
overlayIv | String | The HLS security enhancement encryption and decryption IV. |
extInfoMap | Map | Some special configuration items. |
enableRenderProcess | bool | Whether to allow the postrendering and postproduction feature, which is enabled by default. If the super-resolution plugin exists after it is enabled, the plugin will be loaded by default. |
preferredResolution | int | Resolution of the video used for playback preferably. preferredResolution = width * height |
_controller.enableHardwareDecode(enable);
SuperPlayerState superPlayerState = _controller.getPlayerState();
Parameter | Type | Description |
INIT | SuperPlayerState | Initial status |
PLAYING | SuperPlayerState | Playing back |
PAUSE | SuperPlayerState | Paused |
LOADING | SuperPlayerState | Loading |
END | SuperPlayerState | Ended |
_controller.enterPictureInPictureMode(backIcon: "images/ic_pip_play_replay.png",playIcon: "images/ic_pip_play_normal.png",pauseIcon: "images/ic_pip_play_pause.png",forwardIcon: "images/ic_pip_play_forward.png");
Parameter | Type | Description |
backIcon | String | The seek backward icon, which can be up to 1 MB in size as limited by Android. It is optional, and if it is not set, the system icon will be used. |
playIcon | String | The playback icon, which can be up to 1 MB in size as limited by Android. It is optional, and if it is not set, the system icon will be used. |
pauseIcon | String | The pause icon, which can be up to 1 MB in size as limited by Android. It is optional, and if it is not set, the system icon will be used. |
forwardIcon | String | The fast forward icon, which can be up to 1 MB in size as limited by Android. It is optional, and if it is not set, the system icon will be used. |
_controller.onSimplePlayerEventBroadcast.listen((event) {String evtName = event["event"];if (evtName == SuperPlayerViewEvent.onStartFullScreenPlay) {setState(() {_ isFullScreen = true;});} else if (evtName == SuperPlayerViewEvent.onStopFullScreenPlay) {setState(() {_isFullScreen = false;});} else {print(evtName);}});
Status | Description |
onStartFullScreenPlay | Entered the full screen playback mode |
onStopFullScreenPlay | Exited the full screen playback mode |
onSuperPlayerDidStart | Playback started |
onSuperPlayerDidEnd | Playback ended |
onSuperPlayerError | Playback error |
onSuperPlayerBackAction | Return event |
fileId
SuperVodDataLoader
API can be used to request the video data in advance to accelerate the playback start process.SuperPlayerModel model = SuperPlayerModel();model.appId = 1500005830;model.videoId = new SuperPlayerVideoId();model.videoId.fileId = "8602268011437356984";model.title = "VOD";SuperVodDataLoader loader = SuperVodDataLoader();// Values of the required parameters in `model` are directly assigned in `SuperVodDataLoader`loader.getVideoData(model, (resultModel) {_controller.playWithModelNeedLicence(resultModel);})
SuperPlayer
.example/lib
in the GitHub project, copy the SuperPlayer
package to the lib
directory in your project and integrate the Player component as instructed in demo_superplayer.dart
in the sample code.
Then, you can see the PiP mode button at the center on the right of the playback UI of the Player component and click the button to enter the PiP mode.onExtraEventBroadcast
in SuperPlayerPlugin
to listen on the lifecycle of the PiP mode. As follows:SuperPlayerPlugin.instance.onExtraEventBroadcast.listen((event) {int eventCode = event["event"];if (eventCode == TXVodPlayEvent.EVENT_PIP_MODE_ALREADY_EXIT) {// exit pip mode} else if (eventCode == TXVodPlayEvent.EVENT_PIP_MODE_REQUEST_START) {// enter pip mode} else if (eventCode == TXVodPlayEvent.EVENT_PIP_MODE_ALREADY_ENTER) {// already enter pip mode} else if (eventCode == TXVodPlayEvent.EVENT_IOS_PIP_MODE_WILL_EXIT) {// will exit pip mode} else if (eventCode == TXVodPlayEvent.EVENT_IOS_PIP_MODE_RESTORE_UI) {// restore UI only support iOS}});
_onEnterPipMode
method in superplayer_widget.dart
. The error codes are as detailed below:Parameter | Code | Description |
NO_ERROR | 0 | Started successfully with no errors. |
ERROR_PIP_LOWER_VERSION | -101 | The Android version is too early and doesn't support the PiP mode. |
ERROR_PIP_DENIED_PERMISSION | -102 | The PiP mode permission wasn't enabled, or the current device doesn't support PiP. |
ERROR_PIP_ACTIVITY_DESTROYED | -103 | The current UI was terminated. |
ERROR_IOS_PIP_DEVICE_NOT_SUPPORT | -104 | The device model or system version doesn't support PiP (only supported on iPadOS 9+ and iOS 14+). |
ERROR_IOS_PIP_PLAYER_NOT_SUPPORT | -105 | The player doesn't support PiP. |
ERROR_IOS_PIP_VIDEO_NOT_SUPPORT | -106 | The video doesn't support PiP. |
ERROR_IOS_PIP_IS_NOT_POSSIBLE | -107 | The PiP controller was unavailable. |
ERROR_IOS_PIP_FROM_SYSTEM | -108 | The PiP controller reported an error. |
ERROR_IOS_PIP_PLAYER_NOT_EXIST | -109 | The player object didn't exist. |
ERROR_IOS_PIP_IS_RUNNING | -110 | The PiP feature was running. |
ERROR_IOS_PIP_NOT_RUNNING | -111 | The PiP feature didn't start. |
isDeviceSupportPip
in SuperPlayerPlugin
to check whether the PiP mode can be enabled as follows:int result = await SuperPlayerPlugin.isDeviceSupportPip();if(result == TXVodPlayEvent.NO_ERROR) {// pip support}
result
means the same as the error code of the PiP mode.TXPipController.instance.setNavigatorHandle((params) {navigatorKey.currentState?.push(MaterialPageRoute(builder: (_) => DemoSuperPlayer(initParams: params)));});
TXPipPlayerRestorePage
method. After setting it up, when you are about to enter picture-in-picture, the controller will call the void onNeedSavePipPageState(Map<String, dynamic> params)
method. At this time, you can store the necessary parameters for the current page in the params.TXPipController.instance.setPipPlayerPage(this);
_onEnterPipMode
internal method of SuperPlayerView
will be called to enter picture-in-picture, or you can call the enterPictureInPictureMode
method of SuperPlayerController
to enter it manually.isEnableDownload
in SuperPlayerModel, which is disabled by default.SuperPlayerModel model = SuperPlayerModel();// Enable video download capabilitymodel.isEnableDownload = true;
startDownload
method of SuperPlayerController
to directly download the video that the player is currently playing, corresponding to the clarity of the currently playing video. You can also use DownloadHelper
to download a specified video, as follows:DownloadHelper.instance.startDownloadBySize(videoModel, videoWidth, videoHeight);
startDownloadBySize
of DownloadHelper
to download videos of a specific resolution. If the resolution is not available, a video with a similar resolution will be downloaded.// QUALITY_240P 240p// QUALITY_360P 360P// QUALITY_480P 480p// QUALITY_540P 540p// QUALITY_720P 720p// QUALITY_1080P 1080p// QUALITY_2K 2k// QUALITY_4K 4k// The quality parameter can be customized to take the minimum value of the resolution width and height// (for example, for a resolution of 1280*720, if you want to download a stream of this resolution,// you can pass in QUALITY_720P for the quality parameter). The player SDK will select a stream with// a resolution less than or equal to the passed-in resolution for downloading.// Using quality ID to downloadDownloadHelper.instance.startDownload(videoModel, qualityId);// Using mediaInfo to downloadDownloadHelper.instance.startDownloadOrg(mediaInfo);
CommonUtils
provides the getDownloadQualityBySize
method to convert the resolution to the corresponding quality ID.CommonUtils.getDownloadQualityBySize(width, height);
stopDownload
of DownloadHelper
method to stop downloading the corresponding video. Example code:DownloadHelper.instance.stopDownload(mediaInfo);
getMediaInfoByCurrent
of DownloadHelper
method or by using getDownloadList
of TXVodDownloadController
to obtain download information.deleteDownload
of DownloadHelper
method to delete the corresponding videobool deleteResult = await DownloadHelper.instance.deleteDownload(downloadModel.mediaInfo);
// Registering download event listenersDownloadHelper.instance.addDownloadListener(FTXDownloadListener((event, info) {// Download status change}, (errorCode, errorMsg, info) {// Download error callback}));// Removing download event listenersDownloadHelper.instance.removeDownloadListener(listener);
TXVodDownloadController.instance.getDownloadInfo(mediaInfo)
method or the TXVodDownloadController.instance.getDownloadList()
method to directly query the downloadState in the mediaInfo to determine the download status.TXVodDownloadController.instance.getDownloadInfo(mediaInfo)
and TXVodDownloadController.instance.getDownloadList()
to play the downloaded videos directly with TXVodPlayerController.controller.startVodPlay(mediaInfo.playPath);
Landscape left
" and "Landscape right
". This will ensure that the iOS device can support landscape orientation.SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
SuperPlayerPlugin.startVideoOrientationService();
SuperPlayerPlugin.instance.onEventBroadcast
. The player component will automatically rotate according to these events. Here is an example of how to use this listener:SuperPlayerPlugin.instance.onExtraEventBroadcast.listen((event) {int eventCode = event["event"];if (eventCode == TXVodPlayEvent.EVENT_ORIENTATION_CHANGED ) {int orientation = event[TXVodPlayEvent.EXTRA_NAME_ORIENTATION];// do orientation}});
この記事はお役に立ちましたか?