Xamarin Forms - Reproduzindo Vídeos

 Neste artigo eu vou mostrar como podemos reproduzir vídeos uma aplicação Xamarin Forms.

Para reproduzir vídeos em uma aplicação Xamarin Forms vamos usar o plugin MediaManger. Segundo a documentação que você pode acessar neste link o pacote usa a API CrossMediaManager.Current.Play para reproduzir vídeo/áudio.

No Android você deverá definir as seguintes permissões no arquivo Manifest : AccessWifiState, Internet, MediaContentControl e WakeLock

Para mais detalhes consulte a documentação do componente.

Recursos Usados

Criando o projeto Xamarin Forms

Abra o  VS 2017 Community update 15.5 e clique em New Project e a seguir escolha Cross Platform -> Cross Platform App (Xamarin.Forms) e informe o nome XF_Video.

Ao criar um projeto Xamarin Forms em uma versão anterior à atualização 15.5, você tinha duas opções para compartilhar o código entre as plataformas:

  1. Shared Project
  2. Portable Class Library (PCL)

Pois a partir da versão 15.5 do Visual Studio(lançada em dezembro/2017) a opção Portable Class Library (PCL) foi substituida pela .NET Standard:

Marque as opções Android e/ou iOS, marque Xamarin Forms e a seguir marque .NET Standard e clique no botão OK.

Pronto nosso projeto já esta criado.

Incluindo o pacote Plugin.MediaManager.Forms no projeto

Vamos agora incluir o plugin em nosso projeto. No menu Tools abra o gerenciador de pacotes do Nuget para a Solution e clique em Browse selecionando o pacote: Plugin.MediaManager.Forms

Instale o pacote em todos os projetos clicando em Install.

Definindo o código da MainPage.xaml

Abra o arquivo MainPage.xaml e inclua no 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"
             xmlns:local="clr-namespace:XF_Video"
             xmlns:forms="clr-namespace:Plugin.MediaManager.Forms;assembly=Plugin.MediaManager.Forms"
             x:Class="XF_Video.MainPage">
    <StackLayout>
        <Button x:Name="btnPlayStop" Text="Reproduzir" Clicked="btnPlayStop_Clicked" />
        <forms:VideoView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" AspectMode="AspectFill" />
    </StackLayout>
</ContentPage>
  

Neste código temos:

Um controle StackLayout que esta empilhando os controles :

- 1 Button onde temos o evento btnPlayStop_Clicked que iremos tratar no code-behind a execução e a pausa na reprodução do vídeo;

- 1 VideoView onde iremos exibir o vídeo;

Observe que definimos o namespace para o pacote:

xmlns:forms="clr-namespace:Plugin.MediaManager.Forms;assembly=Plugin.MediaManager.Forms"

No arquivo MainPage.xaml.cs temo o código do evento Clicked do botão de comando que é visto a seguir:
 
using Plugin.MediaManager;
using System;
using Xamarin.Forms;
namespace XF_Video
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
	InitializeComponent();
        }
        
        private string videoUrl = "https://archive.org/download/BigBuckBunny_328/BigBuckBunny_512kb.mp4";
        private void btnPlayStop_Clicked(object sender,EventArgs e)
        {
            if(btnPlayStop.Text == "Reproduzir")
            {
                btnPlayStop.Text = "Parar";
                CrossMediaManager.Current.Play(videoUrl, Plugin.MediaManager.Abstractions.Enums.MediaFileType.Video);
            }
            else if (btnPlayStop.Text == "Parar")
            {
                btnPlayStop.Text = "Reproduzir";
                CrossMediaManager.Current.Stop();
            }
        }
   }
}

Aqui usamos os recursos do plugin reproduzir/parar o vídeo.

Executando o projeto usando o emulador Genymotion para o Android iremos obter o seguinte resultado:
 

Este exemplo é bem simples e foi feito apenas para mostrar como usar o plugin.

Pegue o código do projeto compartilhado aqui : XF_Video.zip (sem as referências)

"Jesus disse-lhes: A minha comida é fazer a vontade daquele que me enviou, e realizar a sua obra."
 João 4:34


 

Referências:

José Carlos Macoratti