Xamarin Forms - Audio e Video com MediaElement

Xamarin Forms - Audio e Video com MediaElement

Neste artigo vou apresentar o novo recurso MediaElement disponível a partir do Xamarin Forms 4.5.

O recurso MediaElement é uma view que podemos usar para reproduzir vídeo e áudio.

A mídia compatível com a plataforma subjacente pode ser reproduzida a partir das seguintes fontes:

da web, usando um URI (HTTP ou HTTPS);
De um recurso embutido no aplicativo da plataforma, usando o esquema URI ms-appx:///;
De arquivos das pastas de dados locais e temporárias do aplicativo, usando o esquema URI ms-appdata:///;
da Biblioteca do dispositivo;

O MediaElement pode usar os controles de reprodução da plataforma, chamados de controles de transporte. No entanto, eles são desabilitados por padrão e podem ser substituídos por seus próprios controles de transporte.

Lembrando que este é um recurso experimental e para ser usado teremos que adicionar o código abaixo ás classes AppDelegate no iOS, e, MainActivity no Android, antes da chamada de Forms.Init:


 global::Xamarin.Forms.Forms.SetFlags("Brush_Experimental");

Podemos também definir o código abaixo no arquivo App.xaml.cs antes da inicialização :

       public App()
        {
            Device.SetFlags(new string[] { "MediaElement_Experimental" });
            InitializeComponent();

            MainPage = new MainPage();
        }

O MediaElement possui diversas propriedades. A seguir vou listar a seguir as principais:

Aspect - Determina como a mídia será dimensionada para caber na área de exibição. O valor padrão desta propriedade é AspectFit.
AutoPlay - Indica se a reprodução de mídia começará automaticamente quando a propriedade Source for definida. O valor padrão desta propriedade é true;
IsLooping - Descreve se a fonte de mídia carregada no momento deve retomar a reprodução do início após chegar ao fim. O valor padrão desta propriedade é false;
Source - Indica a origem da mídia carregada no controle;
VideoHeight - Indica a altura do controle. Esta é uma propriedade somente leitura;
VideoWidth - Indica a largura do controle. Esta é uma propriedade somente leitura;
Volume - Determina o volume da mídia, que é representado em uma escala linear entre 0 e 1. Esta propriedade usa uma ligação TwoWay e seu valor padrão é 1.

Além disso a classe MediaElement também define quatro eventos:

MediaOpened é disparado quando o fluxo de mídia é validado e aberto;
MediaEnded é disparado quando o MediaElement termina de reproduzir sua mídia;
MediaFailed é disparado quando há um erro associado à fonte de mídia;
SeekCompleted é disparado quando o ponto de busca de uma operação de busca solicitada está pronto para reprodução;

Os 3 métodos principais são: Play(), Pause() e Stop().

Agora vamos ver como usar este recurso na prática.

Recursos usados:

Visual Studio 2019 Community
Xamarin

Criando o projeto Xamarin Forms

Vamos criar um novo projeto Xamarin Forms no VS 2019 Community com o nome XF_MediaElement1.

Nota: Verifique se você precisa atualizar as versões do Xamarin Forms e do Xamarin.Essentials

Você pode ver como criar um projeto no Xamarin Forms neste link: Criar Projeto Xamarin Forms

Com o projeto criado precisamos incluir a flag 'MediaElement_Experimental' no projeto.

Podemos fazer isso no arquivo App.xaml.cs :

       public App()
        {
            Device.SetFlags(new string[] { "MediaElement_Experimental" });
            InitializeComponent();

            MainPage = new MainPage();
        }

Agora podemos usar o recurso em nosso projeto.

Executando uma mídia remota

No arquivo MainPage.xaml inclua o código abaixo:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XF_MediaElement1.MainPage">

    <StackLayout>
        <Frame BackgroundColor="Maroon" Padding="24" CornerRadius="0">
            <Label Text="MediaElement" HorizontalTextAlignment="Center" 
            TextColor="White" FontSize="36"/>
        </Frame>

        <MediaElement Source="https://sec.ch9.ms/ecn/ch9/wp7.mp4" 
                      ShowsPlaybackControls="True"
                      VerticalOptions="FillAndExpand">
        </MediaElement>

    </StackLayout>

</ContentPage>

Executando uma mídia local

Podemos reproduzir também uma mídia local a partir das seguintes fontes:

De um recurso embutido no aplicativo da plataforma, usando o esquema URI ms-appx: ///;
De arquivos que vêm das pastas de dados locais e temporárias do aplicativo, usando o esquema URI ms-appdata: ///;
Da biblioteca do dispositivo;

Observe as seguintes recomendações para usar o esquema "ms-appx" para a fonte local e os seguintes locais se estiver usando mídia local:

No iOS, os arquivos de mídia devem ser armazenados na pasta Resources ou em uma subpasta da pasta Resources. O arquivo de mídia deve ter uma ação Build de BundleResource;
No Android, os arquivos de mídia devem ser armazenados em uma subpasta de Resources chamada raw. A pasta bruta não pode conter subpastas. O arquivo de mídia deve ter uma ação Build de AndroidResource.
No UWP, os arquivos de mídia podem ser armazenados em qualquer pasta do projeto. O arquivo de mídia deve ter uma BuildAction of Content.

Exemplo:


 <MediaElement Source="ms-appx:///Demo.mp4" ShowsPlaybackControls="True" />

Outra opção é usar o MediaElement para reproduzir arquivos de mídia que são copiados nas pastas de dados locais ou temporárias do aplicativo, usando o esquema de URI ms-appdata: ///.

O exemplo a seguir mostra a propriedade Source definida para um arquivo de mídia armazenado na pasta de dados local do aplicativo:

Em outro artigo voltamos ao assunto.

"Não vos prendais a um jugo desigual com os infiéis; porque, que sociedade tem a justiça com a injustiça? E que comunhão tem a luz com as trevas?"
2 Coríntios 6:14

Referências:

José Carlos Macoratti