Cómo insertar un video de YouTube en WPF o UWP

YouTube actualmente se ha convertido en el lugar por excelencia para albergar vídeos, por lo que es bastante común que tengamos que reproducir algún video hosteado en este servicio en nuestras aplicaciones.

Utilizando el control MediaElement

Tanto WPF como UWP tienen el control MediaElement, que no es más que un reproductor nativo de elementos multimedia (video, audio), como se puede ver en la siguiente imagen:

Para utilizar este control debemos indicar en la propiedad Source la ruta completa al archivo que se va a resproducir (ya sea local o remoto):

<MediaElement Source="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4"
              AreTransportControlsEnabled="True"></MediaElement>

Así que el problema lo tenemos en indicarle la URL exacta del video de YouTube que vamos a reproducir.

Extrayendo la URL del video de Youtube

Para extraer la URL del video de YouTube vamos a utilizar una biblioteca que nos lo va a proporcionar si le indicamos el identificador del video.

El primer paso es ir al administrador de paquetes de NuGet para buscar e instalar la biblioteca MyToolkit (hay que instalar tanto MyToolkit como MyToolkit.Extended si desarrollamos una UWP):

Ahora tenemos que mirar el identificador del video que queremos reproducir, en este caso partimos de la URL https://www.youtube.com/watch?v=gMMjPeSKzLY aquí el identificador es el conjunto de caracteres que hay tras el igual, es decir, el identificador es gMMjPeSKzLY.

La biblioteca añadida anteriormente nos va a proporcionar la clase YouTube, esta tiene los métodos para obtener la URL del video para una resolución concreta:

public async void ShowVideo() {
    var videoURL = await YouTube.GetVideoUriAsync("gMMjPeSKzLY", YouTubeQuality.Quality480P);
    MediaElement.Source = videoURL.Uri;
}

En mi caso he creado el método que podeís ver en el código anterior, donde en primer lugar y se busca la URL del video de YouTube y después se la asigna al reproductor. Como para el método de la biblioteca es asíncrono, hay que utilizar la palabra reservada await, para que se ejecute síncronamente, de igual manera hay que utilizar la palabra reservada async en la definición del método.

Una vez que hemos añadido las líneas anteriores, ya tenemos nuestro video de YouTube siendo reproducido en nuestra aplicación:

Espero que este tutorial sea de vuestro agrado y os ayude a incorporar los videos de YouTube en vuestras aplicaciones.