Core components

Updated at:

AliPlayerWidget uses a layered design inspired by the Model-View-Controller (MVC) pattern. It consists of three core components: the view, the controller, and the data model. These components work together to deliver complete video playback functionality.

AliPlayerWidget

AliPlayerWidget is the core player component (view). You embed it in your Flutter application to play videos.

Constructor

AliPlayerWidget(
  AliPlayerWidgetController controller, {
  Key? key,
  Map<SlotType, SlotWidgetBuilder?> slotBuilders = const {},
  OnBackPressedCallback? onBackPressed,
});
  • controller: The player controller that manages playback logic.

  • slotBuilders: An optional map of slot builders that allows you to customize how each slot is built. For more details, see the slot system.

  • onBackPressed: An optional callback invoked when the user presses the Back button. Returning true indicates that the event has been handled and prevents the default behavior. Returning false or null executes the default behavior (Navigator.pop).

Back button event handling (optional)

By default, when the user presses the Back button:

  1. If the player is in full-screen mode, it exits full-screen mode.

  2. If an onBackPressed callback is provided, the player invokes it.

  3. If the callback returns false or null, the default Navigator.pop() action is executed.

You can fully customize the back button behavior by using the onBackPressed callback:

AliPlayerWidget(
  _controller,
  onBackPressed: () {
    // Custom back button logic
    Navigator.of(context).pop();
    return true; // Return true to indicate the event is handled and prevent default behavior
  },
);

AliPlayerWidgetController

AliPlayerWidgetController is the controller for the player component. It manages the logic for initializing, playing, and destroying the player.

Key methods

  • configure(AliPlayerWidgetData data): Configures the data source.

  • play(): Starts video playback.

  • pause(): Pauses playback.

  • seek(Duration position): Seeks to a specified playback position.

  • destroy(): Destroys the player instance and releases its resources.

AliPlayerWidgetData (data model)

AliPlayerWidgetData is the data model for the player component. It contains information such as the video source, cover image, and title.

Properties

  • videoSource: The video source for the player (Required).

  • coverUrl: The URL of the cover image (Optional).

  • videoTitle: The video title (Optional).

  • thumbnailUrl: The URL of the thumbnail (Optional).

  • sceneType: The playback scene type. The default is VOD (SceneType.vod).

  • onPlayerConfig: An optional callback for custom player configuration. For more information, see Custom configuration.

Global settings (optional)

In addition to the three core components, AliPlayerWidget provides an optional AliPlayerWidgetGlobalSetting class. This class is used to configure the player's global behavior, such as cache settings and storage paths.

Key features

  • Global settings initialization: Use the setupConfig method to initialize global settings.

  • Storage path settings: Use the setStoragePaths method to set paths for the cache and file storage.

  • Cache management: Use the clearCaches method to clear all caches.

  • Custom configuration: Supports both global-level and instance-level custom configurations. For more information, see Custom configuration.

Usage

The component includes recommended global settings by default, so additional configuration is not usually required. If you need to make custom adjustments, see the Custom configuration documentation.