Flutter player with ui integration solution

aliplayer_widget is open-source and provides multiple download methods. If you need to customize the component, you can use the source code dependency method to directly obtain and modify the source code. The complete source code can be obtained in the following ways:

The download package includes:

• Core Components: Complete implementation of AliPlayerWidget and AliPlayerWidgetController.

• Sample Project: aliplayer_widget_example provides code examples for VOD, live streaming, and list playback scenarios to help developers quickly integrate and use.

• Documentation and Comments: The source code contains detailed comments and development guides for custom development and customization.

Integration method

Manually Add Dependencies

Add the following dependencies to your pubspec.yaml file:

dependencies:
  aliplayer_widget: ^x.y.z

Use Command Line Tools

If you prefer to use the command line, you can directly run the following command to add dependencies:

flutter pub add aliplayer_widget

This command will automatically update your pubspec.yaml file.

After adding dependencies, run the following command in the terminal to install the dependencies:

flutter pub get

Through the above steps, AliPlayerWidget has been successfully integrated into your project, and you can start using it!

Implement video playback

The following is a complete example showing how to embed a video player in a page. You can implement the video playback function with just a few lines of code.

import 'package:flutter/material.dart';
import 'package:aliplayer_widget/aliplayer_widget_lib.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: VideoPlayerPage(),
    );
  }
}

class VideoPlayerPage extends StatefulWidget {
  @override
  _VideoPlayerPageState createState() => _VideoPlayerPageState();
}

class _VideoPlayerPageState extends State<VideoPlayerPage> {
  late AliPlayerWidgetController _controller;

  @override
  void initState() {
    super.initState();
    // Initialize the player widget controller
    _controller = AliPlayerWidgetController(context);
    // Configure player widget data
    final data = AliPlayerWidgetData(
      videoUrl: "https://example.com/video.mp4", // Replace with the actual video URL
      coverUrl: "https://example.com/cover.jpg", // Replace with the actual cover image URL
      videoTitle: "Sample Video",
    );
    _controller.configure(data); // Set autoplay
  }

  @override
  void dispose() {
    // Destroy the player instance and release resources
    _controller.destroy();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AliPlayerWidget(
          _controller,
        ),
      ),
    );
  }
}

More Scenario Support

The above example demonstrates the basic usage of the VOD scenario. For more complex scenarios such as live streaming and list playback, refer to the aliplayer_widget_example sample project, which contains detailed code and usage instructions.

Compile and run

Sample description

The aliplayer_widget_example project covers multiple typical scenarios, demonstrating the core features of AliPlayerWidget and its practical applications in different scenarios. Whether it's a basic VOD playback page, a complex live streaming playback page, or a short video list playback page, developers can quickly master the integration and usage methods through this sample project and customize development according to their needs.

@override
void initState() {
  super.initState();
  _controller = AliPlayerWidgetController(context);
  final data = AliPlayerWidgetData(
    videoUrl: "https://example.com/sample-video.mp4",
    coverUrl: "https://example.com/sample-cover.jpg",
    videoTitle: "Sample Video Title",
  );
  _controller.configure(data);
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: AliPlayerWidget(_controller),
  );
}

@override
void initState() {
  super.initState();
  _controller = AliPlayerWidgetController(context);
  final data = AliPlayerWidgetData(
    videoUrl: "https://example.com/live-stream.m3u8",
    sceneType: SceneType.live,
  );
  _controller.configure(data);
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        Expanded(child: AliPlayerWidget(_controller)),
        _buildChatArea(),
        _buildMessageInput(),
      ],
    ),
  );
}

For the usage of short video list operations, see Integrate Micro-Short Drama Solution - Flutter.

AliPlayerWidget

AliPlayerWidget is the core player component used to embed in Flutter applications and play videos.

Constructor

AliPlayerWidget(
  AliPlayerWidgetController controller, {
  Key? key,
  List<Widget> overlays = const [],
});

Example is as follows

AliPlayerWidget(
  _controller,
  overlays: [
    Positioned(
      right: 16,
      bottom: 80,
      child: Column(
        children: [
          IconButton(icon: Icon(Icons.favorite), onPressed: () {}),
          IconButton(icon: Icon(Icons.share), onPressed: () {}),
        ],
      ),
    ),
  ],
);

AliPlayerWidgetController

AliPlayerWidgetController is the core controller of the player component, used to manage the initialization, playback, and destruction logic of the player component.

Method Description

Example is as follows

// Initialize the player widget controller
final controller = AliPlayerWidgetController(context);

// Set player widget data
AliPlayerWidgetData data = AliPlayerWidgetData(
  videoUrl: "https://example.com/video.mp4",
);
controller.configure(data);

// Destroy the player
controller.destroy();

AliPlayerWidgetData

AliPlayerWidgetData is the data model required by the player component, including video URL, cover image, title, and other information.

Attribute Description

Example is as follows

AliPlayerWidgetData(
  videoUrl: "https://example.com/video.mp4",
  coverUrl: "https://example.com/cover.jpg",
  videoTitle: "Sample Video",
  sceneType: SceneType.vod,
);

Overlay components

Through the overlays parameter, you can easily overlay custom UI components on the player, such as adding like, comment, and share buttons.

AliPlayerWidget(
  _controller,
  overlays: [
    Positioned(
      right: 16,
      bottom: 80,
      child: Column(
        children: [
          IconButton(icon: Icon(Icons.favorite), onPressed: () {}),
          IconButton(icon: Icon(Icons.comment), onPressed: () {}),
          IconButton(icon: Icon(Icons.share), onPressed: () {}),
        ],
      ),
    ),
  ],
);

Common interfaces

AliPlayerWidget provides a series of external interfaces to allow developers to directly control the player's behavior. These interfaces are exposed through AliPlayerWidgetController and support playback control, status query, data update, and other functions. The following are some common external interfaces and their usage scenarios:

Configuration and Initialization

Playback Control

Playback Attribute Settings

Other Settings

Multi-scenario adaptation

Supports VOD, live streaming, list playback, and full-screen playback scenarios.

Rich feature set

• Basic Features: Provides core features such as playback control, settings panel, cover image display, and resolution switching to meet regular video playback needs.

• Gesture Control: Supports gesture adjustment of brightness, volume, and playback progress, providing intuitive and convenient operations to enhance user experience.

Flexible UI customization

• Overlay Support: Supports custom overlay components with strong extensibility, allowing developers to implement complex features such as ads and live comments.

• Modular Design: Built-in reusable UI components such as top bar, bottom bar, and settings panel, making it easy for developers to customize as needed.

• Full-Screen Adaptation: Automatically adapts to horizontal and vertical screen switching to ensure the best display effect on different devices.

Event and status management

• Real-Time Status Monitoring: Provides real-time data updates such as playback status, video size, and buffering progress to facilitate dynamic interaction by developers.

• Event Callback Mechanism: Provides comprehensive player event monitoring, including playback start, pause, and completion status management, making it easy for developers to handle various playback scenarios.

• Log and Debug Support: Built-in detailed logging system to facilitate troubleshooting and performance optimization.

Easy to use

Complex video playback features can be implemented through simple API calls and quickly integrated into Flutter projects.

Flexible and extensible

• Modular design supports various customization options, making it easy for developers to customize according to their needs.

• Automatically adapts to different screen sizes and resolutions to ensure a consistent user experience.

High performance and stability

• Based on the ApsaraVideo Player SDK, it provides a low-latency and high-stability video playback experience.

• Optimized architecture design ensures efficient operation and smooth user experience through lightweight components, asynchronous loading, and event-driven models.

Cross-platform support

Fully utilizes Flutter's cross-platform features, supporting both Android and iOS platforms, enabling dual-end operation with a single development.