24 - Control MediaElement para la reproducción de archivos de video

Otra de las funcionalidades que encapsula la clase MediaElement es la de reproducción de archivos de video (mp4, avi, wmv etc.)

Métodos y propiedades útiles de la clase MediaElement:

• Source : En esta propiedad debemos hacer referencia a la ubicación del archivo (puede ser un recurso propio de la aplicación normalmente localizada en la carpeta Assets, en internet etc.)
• Play : Este método inicia la reproducción del archivo de video.
• Pause : Pausa la ejecución del archivo de video que se está ejecutando. Si se llama nuevamente a Play continua donde se encontraba.
• Stop : Detiene la ejecución y si lo reiniciamos vuelve a ejecutarse desde el principio.
• Volume : Define el volumen de salida (valor entre 0 y 1)
• MediaEnded : Este evento se dispara cuando se termina de reproducir el video.

Problema.

Probar los métodos de la clase MediaElement para la reproducción de videos.

Como primer paso creamos un nuevo proyecto llamado "Proyecto32" seleccionando desde el menú de opciones del Visual Studio: Archivo -> Nuevo -> Proyecto

Copiar un archivo llamado video1.mp4 a la carpeta Assets:

La interfaz visual a implementar es la siguiente:

El archivo MainPage.xaml:

<Page
    x:Class="Proyecto32.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Proyecto32"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" Grid.Row="0" HorizontalAlignment="Center">
            <Button x:Name="boton1" Content="Iniciar video" Click="boton1_Click" Margin="5"/>
            <Button x:Name="boton2" Content="Pausar" Click="boton2_Click" Margin="5"/>
        </StackPanel>
        <StackPanel Grid.Row="1">
            <MediaElement x:Name="mediaElement1" Stretch="Uniform" AutoPlay="False" MediaEnded="mediaElement1_MediaEnded"/>
        </StackPanel>
    </Grid>
</Page>

Definimos un Grid con dos fila, en la primera definimos dos botones y en la segundo fila definimos un MediaElement donde iniciamos la propiedad Stretch con el valor Uniform para que el tamaño del video se adapta al contenedor en forma uniforme:

            <MediaElement x:Name="mediaElement1" Stretch="Uniform" AutoPlay="False" MediaEnded="mediaElement1_MediaEnded"/>

En el archivo MainPage.xaml tenemos:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// La plantilla de elemento Página en blanco está documentada en http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace Proyecto32
{
    /// 

    /// Página vacía que se puede usar de forma independiente o a la que se puede navegar dentro de un objeto Frame.
    /// 
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            mediaElement1.Source = new Uri(this.BaseUri, "Assets/video1.mp4");
            boton2.IsEnabled = false;

        }

        private void boton1_Click(object sender, RoutedEventArgs e)
        {
            mediaElement1.Play();
            boton1.IsEnabled = false;
            boton2.IsEnabled = true;
        }

        private void boton2_Click(object sender, RoutedEventArgs e)
        {
            if (boton2.Content.ToString() == "Pausar")
            {
                mediaElement1.Pause();
                boton2.Content = "Continuar";
            }
            else
            {
                mediaElement1.Play();
                boton2.Content = "Pausar";
            }
        }

        private void mediaElement1_MediaEnded(object sender, RoutedEventArgs e)
        {
            boton1.IsEnabled = true;
            boton2.IsEnabled = false;
        }
    }
}

En el constructor iniciamos la propiedad Source del objeto mediaElement:

            mediaElement1.Source = new Uri(this.BaseUri, "Assets/video1.mp4");

Cuando se presiona el botón "Iniciar video" se ejecuta el método boton1_Click donde llamamos al método Play y desactivamos el botón "Iniciar video" y activamos e botón "Pausar":

        private void boton1_Click(object sender, RoutedEventArgs e)
        {
            mediaElement1.Play();
            boton1.IsEnabled = false;
            boton2.IsEnabled = true;
        }

Cuando se presiona el segundo botón se llama el método boton2_Click donde según el estado de dicho botón continuamos o pausamos el video que se esta visualizando:

        private void boton2_Click(object sender, RoutedEventArgs e)
        {
            if (boton2.Content.ToString() == "Pausar")
            {
                mediaElement1.Pause();
                boton2.Content = "Continuar";
            }
            else
            {
                mediaElement1.Play();
                boton2.Content = "Pausar";
            }
        }

Finalmente el método mediaElement1_MediaEnded se ejecuto cuando termina la reproducción del video donde activamos el botón "Iniciar video" y desactivamos el otro botón:

        private void mediaElement1_MediaEnded(object sender, RoutedEventArgs e)
        {
            boton1.IsEnabled = true;
            boton2.IsEnabled = false;
        }

Este proyecto lo puede descargar en un zip desde este enlace :Proyecto32.zip

Retornar