Todos os produtos
Search
Central de documentação

ApsaraVideo VOD:Início rápido

Última atualização: Sep 09, 2026

Este guia mostra como começar a usar o AliPlayerKit para Flutter.

Nota

Antes de começar, verifique se o ambiente está configurado e as dependências foram adicionadas conforme descrito em Prerequisites.

Exemplo de início rápido

Este exemplo demonstra como incorporar um player de vídeo em uma página e implementar a reprodução com apenas algumas linhas de código.

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),
    );
  }
}

Etapas principais

  1. Crie o controlador e configure os dados

    • No método initState, crie uma instância de AliPlayerWidgetController.

    • Use VideoSourceFactory para criar o videoSource.

    • Use uma instância de AliPlayerWidgetData para encapsular os dados de reprodução, como a origem do vídeo e o título.

  2. Vincule os dados e renderize a interface

    • Chame _controller.configure(data) para vincular os dados.

    • No método build, use AliPlayerWidget(_controller) para incorporar o widget da interface do player.

  3. Libere recursos:

    • No método dispose, chame _controller.destroy() para evitar vazamentos de memória.

Mais casos de uso

Este exemplo demonstra o uso básico para VOD. Para cenários mais avançados, como streaming ao vivo e reprodução em lista, consulte o projeto de exemplo aliplayer_widget_example para obter códigos detalhados e instruções.