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 |
|
|
Pacote de código-fonte |
O pacote baixado inclui:
Componentes principais: implementação completa do
AliPlayerWidgete doAliPlayerWidgetController.Projeto de exemplo: o
aliplayer_widget_examplefornece 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: 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
-
Clone o repositório.
Primeiro, clone o repositório
aliplayer_widget_examplepara sua máquina local:cd aliplayer_widget_example -
Instale as dependências.
Execute o comando abaixo para instalar as dependências necessárias ao projeto:
flutter pub get -
Compile o projeto.
Compilar o projeto Android
Para compilar o projeto Android, siga estas etapas:
Verifique se o Android SDK e o Gradle estão instalados.
-
Execute o comando a seguir para gerar o arquivo APK:
flutter build apk 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:
Verifique se o Xcode e o CocoaPods estão instalados.
-
Inicialize as dependências do CocoaPods:
cd ios && pod install && cd .. -
Execute o comando abaixo para gerar o arquivo de pacote de aplicativo iOS (IPA):
flutter build ipa Após a conclusão da compilação, o arquivo IPA estará localizado em
build/ios/ipa/Runner.ipa.
-
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
-
Abra o projeto.
Inicie o Android Studio. Selecione
Open an Existing Projecte abra o diretório clonadoaliplayer_widget_example. -
Instale as dependências.
No Android Studio, clique em
pubspec.yamle, em seguida, clique emPub Getno canto superior direito para instalar as dependências. -
Configure o dispositivo.
Certifique-se de que um dispositivo físico Android esteja conectado.
-
Execute o aplicativo.
Clique em
Runna barra de ferramentas e selecione o dispositivo de destino para iniciar o aplicativo.
-
-
Usar o VS Code
-
Abra o projeto.
Inicie o VS Code. Selecione
File -> Open Foldere abra o diretório clonadoaliplayer_widget_example. -
Instale as dependências.
Abra o terminal (
Ctrl + ~) e execute o comando a seguir para instalar as dependências:flutter pub get -
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.
-
Execute o aplicativo.
Pressione
F5ou clique emRun and Debugna Barra de Atividades à esquerda. Selecione a configuraçãoFluttere inicie a sessão de depuração.
-
-
Usar o Xcode (somente iOS)
-
Abra o projeto.
Acesse o diretório
iose clique duas vezes no arquivoRunner.xcworkspacepara abrir o projeto no Xcode. -
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 .. -
Configure a assinatura.
No Xcode, selecione o projeto
Runner, acesse a abaSigning & Capabilitiese configure uma conta de desenvolvedor válida e um certificado de assinatura. -
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.
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 forhttps://example.aliyundoc.com/test.mp4, a URL passada ao player deve serhttps://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.