ApsaraVideo VOD:Quick start

Quick start example

This example shows how to embed a video player in a page and implement video playback with just a few lines of code.

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

void main() {
  // === 0. Initialize global settings for the player widget ===
  // Optional: The widget includes recommended settings, so extra configuration is not usually needed. For custom settings, see the "Custom Configurations" document.
  // Use AliPlayerWidgetGlobalSetting to apply global settings.
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: VideoPlayerPage());
  }
}

class VideoPlayerPage extends StatefulWidget {
  const VideoPlayerPage({super.key});

  @override
  _VideoPlayerPageState createState() => _VideoPlayerPageState();
}

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

  @override
  void initState() {
    super.initState();

    // === 1. Create the controller and configure data ===

    // Create a video source.
    final videoSource = VideoSourceFactory.createVidAuthSource(
      vid: "<your-video-id>",
      playAuth: "<your-play-auth>",
    );

    // Configure the data for the player widget.
    final data = AliPlayerWidgetData(
      videoSource: videoSource,
      videoTitle: "<your-video-title>",
    );

    // Initialize the controller for the player widget.
    _controller = AliPlayerWidgetController();
    _controller.configure(data);
  }

  @override
  void dispose() {
    // === 3. You must release resources when the page is disposed ===
    _controller.destroy();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('AliPlayerWidget Demo')),
      // === 2. Embed the player UI widget ===
      body: AliPlayerWidget(_controller),
    );
  }
}

Key steps

1. Create the controller and configure data

   • In the initState method, create an AliPlayerWidgetController instance.

   • Use VideoSourceFactory to build the videoSource.

   • Use an AliPlayerWidgetData instance to encapsulate playback data, such as the video source and title.

2. Bind data and render the UI

   • Call _controller.configure(data) to bind the data.

   • In the build method, use AliPlayerWidget(_controller) to embed the player UI widget.

3. Release resources:

   • In the dispose method, call _controller.destroy() to avoid memory leaks.

More use cases

This example demonstrates the basic usage for VOD. For more advanced use cases, such as live streaming and list playback, refer to the aliplayer_widget_example sample project for detailed code and instructions.