:Flutter player with UI integration

O aliplayer_widget é open source. Obtenha o código-fonte completo de uma das seguintes maneiras e modifique-o para personalizar o componente:

O pacote baixado inclui:

• Componentes principais: Implementação completa do AliPlayerWidget e do AliPlayerWidgetController.

• Projeto de exemplo: O aliplayer_widget_example fornece amostras de código para cenários como VOD, transmissão ao vivo e reprodução em lista, ajudando você a integrar e usar o componente rapidamente.

• Documentação e comentários: O código-fonte contém comentários detalhados e guias de desenvolvimento para personalizações.

Integração

Adicionar a dependência manualmente

Adicione a seguinte dependência ao arquivo pubspec.yaml:

dependencies:
  aliplayer_widget: ^x.y.z

Usar a ferramenta de linha de comando

Se preferir usar a linha de comando, execute o comando abaixo para adicionar a dependência:

flutter pub add aliplayer_widget

Esse comando atualiza automaticamente o arquivo pubspec.yaml.

Após adicionar a dependência, execute o seguinte comando no terminal para instalá-la:

flutter pub get

Depois de concluir essas etapas, o AliPlayerWidget estará integrado ao seu projeto. Agora você pode começar a usá-lo.

Reproduzir um vídeo

O exemplo a seguir demonstra como incorporar um player de vídeo em uma página com apenas algumas linhas de código.

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 component controller.
    _controller = AliPlayerWidgetController(context);
    // Configure the player component data.
    final data = AliPlayerWidgetData(
      videoUrl: "https://example.com/video.mp4", // Replace this with the actual video URL.
      coverUrl: "https://example.com/cover.jpg", // Replace this with the actual thumbnail 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,
        ),
      ),
    );
  }
}

Suporte a mais cenários

O exemplo anterior abrange a reprodução básica de VOD. Para cenários mais complexos, como transmissão ao vivo e reprodução em lista, consulte o projeto de exemplo aliplayer_widget_example, que contém códigos e instruções detalhadas.

Compilar e executar o projeto

Descrição dos exemplos

O projeto aliplayer_widget_example abrange múltiplos cenários e demonstra os recursos principais do AliPlayerWidget. Seja para reprodução básica de VOD, transmissão ao vivo ou reprodução de listas de vídeos curtos, este projeto ajuda você a aprender rapidamente como integrar e personalizar o componente.

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

Para informações sobre como usar a reprodução em lista para vídeos curtos, consulte Integrar a solução de minisséries para Flutter.

AliPlayerWidget

O AliPlayerWidget é o componente principal do player, usado para incorporar e reproduzir vídeos em um aplicativo Flutter.

Construtor

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

Exemplo

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

AliPlayerWidgetController

O AliPlayerWidgetController atua como o controlador central do componente do player. Ele gerencia a lógica de inicialização, reprodução e destruição do componente.

Métodos

Exemplo

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

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

// Destroy the player.
controller.destroy();

AliPlayerWidgetData

O AliPlayerWidgetData é o modelo de dados exigido pelo componente do player. Ele contém a URL do vídeo, miniatura, título e outras informações.

Propriedades

Exemplo

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

Propriedade SceneType

Veja um exemplo abaixo:

_controller = AliPlayerWidgetController(context);
// Set the player component data.
final data = AliPlayerWidgetData(
  sceneType: SceneType.vod
);
_controller.configure(data);

Componentes de sobreposição

Use o parâmetro overlays para sobrepor facilmente componentes de interface personalizados, como botões de Curtir, Comentar e Compartilhar, sobre o player.

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: () {}),
        ],
      ),
    ),
  ],
);

Chamadas de API comuns

O AliPlayerWidget expõe chamadas de API por meio do AliPlayerWidgetController para controle de reprodução, consultas de status e atualizações de dados. Abaixo estão algumas chamadas de API comuns e seus cenários de uso:

Configuração e inicialização

Controle de reprodução

Configurações de propriedades de reprodução

Outras configurações

Sistema de slots

Visão geral O AliPlayerWidget oferece um sistema de slots flexível que permite a personalização detalhada da interface do player. Combine ou substitua livremente componentes de interface para criar uma experiência de reprodução com identidade visual própria, focada em cenários específicos ou minimalista.

Tipos de slots Os seguintes slots de áreas interativas principais são integrados:

Usar a interface padrão

Se nenhum construtor de slot for configurado, a interface completa será carregada por padrão. Isso é adequado para cenários de reprodução padrão.

Widget _buildPlayWidget() {
  return AliPlayerWidget(_controller);
}

Personalizar slots específicos

Personalize componentes específicos conforme necessário, mantendo o restante como padrão:

AliPlayerWidget(
  controller,
  slotBuilders: {
    SlotType.topBar: (context) => MyAppTopBar(title: 'My Video'),
    SlotType.bottomBar: (context) => MyCustomControls(),
  },
)

Personalizar todos os slots

AliPlayerWidget(
  controller,
  slotBuilders: {
    SlotType.topBar: (context) => CustomTop(),
    SlotType.bottomBar: (context) => CustomBottom(),
    SlotType.playControl: (context) => GestureHandler(),
    SlotType.coverImage: (context) => BrandCover(),
    SlotType.playState: (context) => ErrorOverlay(),
    SlotType.centerDisplay: (context) => VolumeIndicator(),
    SlotType.seekThumbnail: (context) => PreviewThumb(),
    SlotType.subtitle: (context) => SubtitleView(),
    SlotType.settingMenu: (context) => MySettings(),
    SlotType.overlays: (context) => [AdBanner(), Watermark()],
  },
)

Ocultar slots específicos

Defina o valor do slot como null para ocultar a área correspondente.

AliPlayerWidget(
  controller,
  slotBuilders: {
    SlotType.topBar: null,        // Hide the top bar.
    SlotType.settingMenu: null,   // Hide the settings menu.
    SlotType.centerDisplay: null, // Disable gesture feedback prompts.
  },
)

Segue um exemplo completo:

// Hide the top and bottom bars for a cleaner interface.
AliPlayerWidget(controller, slotBuilders: {
  SlotType.topBar: null,
  SlotType.bottomBar: null,
});

// Add a custom business overlay.
AliPlayerWidget(controller, slotBuilders: {
  SlotType.overlays: (context) => MyLikeShareButtons(),
});

// Create a fully branded user interface.
AliPlayerWidget(controller, slotBuilders: {
  SlotType.topBar: (context) => MyAppTopBar(),
  SlotType.bottomBar: (context) => MyAppBottomBar(),
  SlotType.settingMenu: null, // Hide settings.
});

// Listen for playback errors.
ValueListenableBuilder<Map<int?, String?>?>(
  valueListenable: _controller.playErrorNotifier,
  builder: (context, error, _) {
    if (error != null) {
      final errorCode = error.keys.firstOrNull;
      final errorMsg = error.values.firstOrNull;
      return Text("Playback error: [$errorCode] $errorMsg");
    }
    return SizedBox.shrink();
  },
);

Adaptação a múltiplos cenários

Oferece suporte a diversos cenários, incluindo VOD, transmissão ao vivo, reprodução em lista e reprodução em tela cheia.

Conjunto rico de recursos

• Recursos básicos: Controle de reprodução, painel de configurações, exibição de miniaturas e troca de definição para reprodução de vídeo padrão.

• Controle por gestos: Ajuste de brilho, volume e progresso da reprodução por meio de gestos para uma experiência intuitiva.

Personalização flexível da interface

• Suporte a sobreposições: Componentes de sobreposição personalizados para recursos como anúncios e comentários ao vivo.

• Design modular: Componentes de interface integrados e reutilizáveis, como barra superior, barra inferior e painel de configurações, facilitando a personalização.

• Adaptação a tela cheia: Troca automática entre os modos paisagem e retrato para exibição ideal em diferentes dispositivos.

Gerenciamento de eventos e status

• Monitoramento de status em tempo real: Atualizações de dados em tempo real para status de reprodução, dimensões do vídeo e progresso do buffer.

• Mecanismo de callback de eventos: Listeners de eventos abrangentes para início, pausa, conclusão e outros estados de reprodução.

• Suporte a logs e depuração: Sistema de logs detalhado para solução de problemas e otimização de desempenho.

Facilidade de uso

Implemente recursos complexos de reprodução de vídeo e integre-os aos seus projetos Flutter com chamadas de API simples.

Flexibilidade e extensibilidade

• Design modular com diversas opções de personalização para desenvolvimento flexível.

• Adaptação automática a diferentes tamanhos de tela e resoluções para uma experiência consistente.

Alto desempenho e estabilidade

• Desenvolvido com base no SDK do ApsaraVideo Player, proporcionando uma experiência de reprodução de vídeo com baixa latência e alta estabilidade.

• Arquitetura otimizada com componentes leves, carregamento assíncrono e modelo orientado a eventos para operação fluida.

Suporte multiplataforma

Aproveita os recursos multiplataforma do Flutter para oferecer suporte a Android e iOS com uma única base de código.