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:
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