Reproducir vídeo en WPF

La reproducción de vídeo en WPF parece bastante sencilla sobre el papel, siempre que se trate de mpg o wmv, y sobre el código resulta igual de simple.

Para este ejemplo crearé un proyecto WPF y añadiré un vídeo adquirido por Internet, lo giraré 30ª y añadiré los botones «Reproducir» y «Parar».

El primer paso es crear un proyecto WPF:

Selección de proyecto WPF

Hecho esto, se nos habrán creado varios archivos de forma automática. Nos vamos a Window1.xaml que es el que contiene el código de presentación de la ventana que nos ha generado Visual Studio.

Lo primero será añadir el «MediaElement», es decir, la parte de la ventana que se encargará de la reproducción del vídeo:

        <MediaElement Height="200" Width="200" Name="ReproductorDePrueba"
                      FlowDirection="LeftToRight" LoadedBehavior="Manual">            
        </MediaElement>

 

Ahora nos queda añadir los botones de «Reproducir» y «Parar». Los añadiremos en un «StackPanel» para que aparezcan centrados en la parte central:

        <StackPanel HorizontalAlignment="Center" Orientation="Horizontal"
                    VerticalAlignment="Bottom">
            <Button Name="BtPlay" Click="BtPlayClick">
                Reproducir
            </Button>
            <Button Name="BtStop" Click="BtStopClick">
                Parar
            </Button>
        </StackPanel>

 

El StackPanel contiene a los dos botones y tiene las propiedades de centrar las cosas horizontalmente, y verticalmente ponerlas en la parte inferior. Además de tener una orientación horizontal para que los componentes aparezcan seguidos uno del otro en el eje de las X y no de las Y.

Los botones tienen un nombre y un «Click». En Click debe ponerse el nombre del método que se ejecutará al hacer click sobre él. El problema es que no hemos escrito aun esos métodos, así que manos a la obra. En nuestro Window1.xaml.cs escribimos el código de ambos métodos:

public void BtPlayClick(object sender, EventArgs e)
{

        TransformGroup tg = new TransformGroup();
        RotateTransform rt = new RotateTransform(30);
        tg.Children.Add(rt);
        ReproductorDePrueba.RenderTransform = tg;
        ReproductorDePrueba.Source = new Uri(@"http://noticias." +
        @"alimentaria.com/ferias/albcn/recursos/Doc_737_Archivo_" +
        @"06_es_pab_autonomias.wmv");
        ReproductorDePrueba.Play();
}

public void BtStopClick(object sender, EventArgs e)
{
        ReproductorDePrueba.Stop();
}

 

Vamos a explicarlos. Lo primero es que reciben dos parámetros porque son llamados por los objetos de la interfaz, así que reciben el objeto que les llama y los argumentos.

Además, en el botón «Reproducir» estamos creando una transformación de rotación de 30º y la estamos añadiendo a un grupo de transformaciones. Esto es porque las transformaciones tienen que estar contenidas en un grupo de transformaciones, en este caso ese grupo sólo contiene una, pero podría contener todas las que queramos.

Luego se añade ese grupo de transformaciones al reproductor y más tarde se le dice qué debe reproducir (ese es un vídeo que encontré por ahí…) que podría ser tanto local como remoto. Por último, se le dice que empiece a reproducir.

El caso del botón «Parar» es bastante más simple… únicamente detiene la reproducción del vídeo.

Yo le he añadido un color de fondo a la ventana, le he cambiado el tamaño y he añadido una imagen, pero básicamente lo que obtendréis se parecerá a esto:

Por Carballude

Me llamo Pablo Carballude González, soy graduado en computación con master en HCI y Seguridad Informática. Actualmente trabajo para Amazon en Seattle como Software Developer Engineer. Soy de esas personas que no saben si los textos autobiográficos deben ser en primera o tercera persona. Lo intenté en segunda, pero no le entendí nada :P

3 comentarios

  1. Y si no es wmv o mpg? Hay maneras de hacer filtros propios para que se muestre video en un control wpf? gracias!

  2. Hola, buenas tardes,

    Yo tengo una aplicación WPF con un video wmv que pesa 21 MB, el video nunca se carga, tienes una idea de porque pasa eso?

    Saludos

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *