Todos os produtos
Search
Central de documentação

ApsaraVideo VOD:Solução de minidramas para Flutter

Última atualização: Jun 27, 2026

A solução de minidramas para Flutter usa o AliPlayerWidget, um componente integrado à interface do usuário.

Visão geral

O AliPlayerWidget é um componente de reprodução de vídeo de alto desempenho para aplicativos Flutter, desenvolvido com base no ApsaraVideo Player SDK (flutter_aliplayer). Ele oferece suporte a diversos cenários de reprodução, incluindo vídeo sob demanda (VOD), streaming ao vivo, reprodução em lista e minidramas. Seu conjunto abrangente de recursos e a personalização flexível da interface tornam-no ideal para várias aplicações, como educação, entretenimento, comércio eletrônico e minidramas. Para mais informações, consulte Solução de integração da UI do Player para Flutter.

O projeto de exemplo aliplayer_widget_example foi criado com a biblioteca Flutter aliplayer_widget. Ele ajuda os desenvolvedores a entender rapidamente como integrar e usar o AliPlayerWidget em um projeto real. Este projeto demonstra como configurar e usar a reprodução de listas de vídeos curtos.

Requisitos de ambiente

Categoria

Descrição

Versão do Flutter

2.10.0 ou posterior. Recomendamos a versão 3.22.2.

Versão do JDK

Use o JDK 11.

Nota

Para definir a versão do JDK como 11, acesse Preferences > Build, Execution, Deployment > Build Tools > Gradle > Gradle JDK e selecione 11. Se a versão 11 não estiver disponível, atualize o Android Studio.

Versão do Android

Android 6.0 ou posterior. Gradle 7.0 ou posterior.

Versão do iOS

iOS 10.0 ou posterior.

Chip do dispositivo móvel

Arquitetura: armeabi-v7a ou arm64-v8a.

Ferramenta de desenvolvimento

Use o Android Studio ou o Visual Studio Code.

Pré-requisitos

Obtenha uma licença do Player SDK e sua chave de licença. Para obter instruções sobre como vincular a licença ao seu aplicativo, consulte Vincular uma licença.

No console do ApsaraVideo VOD, acesse SDK Management > My Authorizations no painel de navegação à esquerda. Na aba License Management, copie a license key e clique em Download Certificate para baixar o arquivo de licença.

Testar a demonstração

Baixar a demonstração

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

Método de download

Link para download

Fonte Pub

Nota

Recomendamos integrar o aliplayer_widget usando uma ferramenta de gerenciamento de pacotes.

GitHub

Repositório no GitHub

Pacote de código-fonte

aliplayer_widget.zip

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, streaming ao vivo e reprodução em lista, facilitando a integração e o uso rápido do componente.

  • 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
Nota

Nota: x.y.z representa o número da versão do aliplayer_widget. Consulte a versão estável mais recente na página oficial do Pub.dev e substitua x.y.z pelo número real da versão, como ^7.0.0.

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.

Compilar e executar o projeto

Executar pela linha de comando

  1. Clone o repositório.

    Primeiro, clone o repositório aliplayer_widget_example para sua máquina local:

    cd aliplayer_widget_example
  2. Instale as dependências.

    Execute o comando abaixo para instalar as dependências necessárias ao projeto:

    flutter pub get
  3. Compile o projeto.

    Compilar o projeto Android

    Para compilar o projeto Android, siga estas etapas:

    1. Verifique se o Android SDK e o Gradle estão instalados.

    2. Execute o comando a seguir para gerar o arquivo APK:

      flutter build apk
    3. Após a conclusão da compilação, o arquivo APK estará localizado em build/app/outputs/flutter-apk/app-release.apk.

    Compilar o projeto iOS

    Para compilar o projeto iOS, siga estas etapas:

    1. Verifique se o Xcode e o CocoaPods estão instalados.

    2. Inicialize as dependências do CocoaPods:

      cd ios && pod install && cd ..
    3. Execute o comando abaixo para gerar o arquivo de pacote de aplicativo iOS (IPA):

      flutter build ipa
    4. Após a conclusão da compilação, o arquivo IPA estará localizado em build/ios/ipa/Runner.ipa.

  4. Execute a amostra.

    • Execute a amostra Android.

      flutter run lib/main.dart
    • Execute a amostra iOS.

      cd ios && pod install && cd ..//Run pod install first.
      
      flutter run lib/main.dart

Executar a partir de uma IDE

  • Usar o Android Studio

    1. Abra o projeto.

      Inicie o Android Studio. Selecione Open an Existing Project e abra o diretório clonado aliplayer_widget_example.

    2. Instale as dependências.

      No Android Studio, clique em pubspec.yaml e, em seguida, clique em Pub Get no canto superior direito para instalar as dependências.

    3. Configure o dispositivo.

      Certifique-se de que um dispositivo físico Android esteja conectado.

    4. Execute o aplicativo.

      Clique em Run na barra de ferramentas e selecione o dispositivo de destino para iniciar o aplicativo.

  • Usar o VS Code

    1. Abra o projeto.

      Inicie o VS Code. Selecione File -> Open Folder e abra o diretório clonado aliplayer_widget_example.

    2. Instale as dependências.

      Abra o terminal (Ctrl + ~) e execute o comando a seguir para instalar as dependências:

      flutter pub get
    3. Configure o dispositivo.

      Certifique-se de que um dispositivo físico Android ou iOS esteja conectado. Use o seletor de dispositivos no canto inferior esquerdo do VS Code para escolher o dispositivo de destino.

    4. Execute o aplicativo.

      Pressione F5 ou clique em Run and Debug na Barra de Atividades à esquerda. Selecione a configuração Flutter e inicie a sessão de depuração.

  • Usar o Xcode (somente iOS)

    1. Abra o projeto.

      Acesse o diretório ios e clique duas vezes no arquivo Runner.xcworkspace para abrir o projeto no Xcode.

    2. Instale as dependências do CocoaPods.

      Se as dependências do CocoaPods não estiverem instaladas, execute o seguinte comando no terminal:

      cd ios && pod install && cd ..
    3. Configure a assinatura.

      No Xcode, selecione o projeto Runner, acesse a aba Signing & Capabilities e configure uma conta de desenvolvedor válida e um certificado de assinatura.

    4. Execute o aplicativo.

      Clique em ▶️ na barra de ferramentas do Xcode e selecione o dispositivo de destino para iniciar o aplicativo.

Uso

Reprodução de lista de vídeos curtos (ShortVideoPage)

Esta seção demonstra como implementar a reprodução em lista incorporando múltiplas instâncias do AliPlayerWidget em uma lista. Veja um exemplo abaixo:

@override
void initState() {
  super.initState();
  _pageController = PageController();
  _loadVideoInfoList();
  _pageController.addListener(_onPageChanged);
}
Widget build(BuildContext context) {
  return Scaffold(
    body: PageView.builder(
      controller: _pageController,
      itemCount: videoInfoList.length,
      itemBuilder: (context, index) {
        final videoInfo = videoInfoList[index];
        return ShortVideoItem(videoInfo: videoInfo);
      },
    ),
  );
}

Resultado: A página atual exibe uma lista de vídeos onde cada item contém uma instância separada do player. Os usuários podem deslizar para alternar entre os vídeos e usar gestos para navegação.

Nota

Para mais soluções de otimização específicas para o cenário de minidramas, consulte a implementação específica no projeto de exemplo aliplayer_widget_example.

Recursos principais

Este componente usa o ApsaraVideo Player SDK para implementar múltiplas instâncias de player (AliPlayer) combinadas com pré-carregamento (MediaLoader) e pré-renderização. Ele integra recursos essenciais como pré-carregamento, pré-renderização, HTTPDNS e reprodução criptografada para melhorar a latência, a estabilidade e a segurança da reprodução.

Pré-carregamento

A estratégia de janela deslizante inicia e interrompe dinamicamente as tarefas de pré-carregamento de vídeo. O SDK subjacente ajusta inteligentemente as prioridades das tarefas com base nas condições da rede, priorizando recursos de rede para os vídeos atuais e subsequentes. Isso melhora significativamente a velocidade de carregamento do primeiro quadro e reduz travamentos durante a reprodução. É possível garantir uma experiência fluida mesmo ao deslizar rapidamente pelos vídeos. Para mais informações, consulte Pré-carregamento.

Pré-renderização

A pré-renderização processa o primeiro quadro dos vídeos subsequentes em segundo plano para reduzir telas pretas e tornar a reprodução mais fluida. O ApsaraVideo SDK for MediaBox e o Player SDK oferecem suporte ao recurso de pré-renderização forçada desde a versão 6.16.0. Para mais informações, consulte Pré-renderização.

HTTPDNS

O HTTPDNS oferece um serviço de resolução DNS mais rápido e estável. Ele substitui a resolução DNS tradicional para reduzir o tempo de resolução, aumentar a velocidade de carregamento e a estabilidade da reprodução de vídeo, além de aprimorar a experiência de visualização do usuário. Não é necessário ativar manualmente o HTTPDNS para o Audio and Video Client SDK e para o Player SDK nas versões 6.12.0 e posteriores. Para mais informações, consulte HTTPDNS.

Criptografia de vídeo

Os vídeos em cenários de minidramas geralmente são arquivos MP4 de 1 a 3 minutos. Desde a versão 6.8.0, o ApsaraVideo SDK for MediaBox e o ApsaraVideo Player SDK oferecem suporte a criptografia privada para arquivos MP4, protegendo o conteúdo dos vídeos de minidramas. Para mais informações, consulte Criptografia de vídeo da Alibaba Cloud (criptografia privada).

A reprodução de vídeos MP4 com criptografia privada requer o seguinte:

  • Ao passar a URL de um vídeo MP4 com criptografia privada para o player, seu aplicativo deve anexar o parâmetro de consulta etavirp_nuyila=1. Por exemplo, se a URL original do vídeo for https://example.aliyundoc.com/test.mp4, a URL passada ao player deve ser https://example.aliyundoc.com/test.mp4?etavirp_nuyila=1.

  • O UID associado à licença do aplicativo deve corresponder ao UID usado para gerar o arquivo MP4 com criptografia privada.

É possível verificar a configuração de um vídeo com criptografia privada checando sua URL quanto aos seguintes aspectos:

  • Os metadados do vídeo devem conter a tag AliyunPrivateKeyUri.

  • O vídeo não pode ser reproduzido diretamente com o ffplay.

Reprodução adaptativa H.265

Quando a decodificação de hardware de um fluxo H.265 falha, o player alterna automaticamente para o fluxo de fallback H.264, caso esteja configurado. Se nenhum fallback H.264 estiver disponível, ele muda automaticamente para a decodificação de software H.265. Para mais informações, consulte Reprodução adaptativa H.265.

Streaming de taxa de bits adaptativa (ABR)

O ApsaraVideo Player SDK oferece suporte a fluxos de vídeo HLS e DASH adaptativos com múltiplas taxas de bits. Você pode implementar a troca adaptativa à rede chamando o método selectTrack do player para alternar entre as taxas de bits. Para mais informações, consulte Troca adaptativa à rede.

Perguntas frequentes

Para mais perguntas frequentes e sugestões de solução de problemas sobre o ApsaraVideo Player SDK, consulte FAQ do Player.