Integrar un video de YouTube en Silverlight 2

silveryoutubemini

 Me pareció tan curioso que me decidí a probarlo 😀 Es sabido, que no se puede insertar un componente Flash en Silverlight 2 … pero como comenta Ary Boretc se puede meter en un DIV flotante y colocarlo en la pantalla. Funciona bastante bien, aunque no funciona a pantalla completa (ya que en pantalla completa solo se puede ver la aplicación Silverlight) y tampoco funciona en Internet Explorer, intentaré averiguar porque 😛

Me faltaba entonces poder moverlo a voluntad como si fuese un elemento más en mi emulador de escritorio. El control que Ary propone, tiene unas propiedades para controlar la posición y el tamaño asi que simplemente es cuestión de “atar” el div al contenido de la ventana, todo gracias a TransformToVisual().

Cada ventana es un UserControl que acepta otro parametro como Content , asi que debia hacer que en todo momento el div ocupase la superficie de ese Content, tanto al moverlo como al redimensionarlo; aunque son elementos de mundos distintos, bailan sobre la misma superficie, un Canvas (en este caso una clase derivada), asi que simplemente se trata de obtener las coordenadas absolutas del Content con respecto al Canvas y aplicarselas al DIV flotante para controlar su posición, además de controlar también el tamaño, que ha de ser el mismo.

Lo primero creo un UserControl que será el contenedor virtual del video (digo virtual, porque realmente no contiene nada :P), y este control inicializa el control YouTubePlayer de Ary.

Siguiente, necesito acceder a la ventana para que me informe cada vez que el layout cambia. Creo que no hay una forma dada para escalar en el arbol visual buscando un Parent específico; yo cree un método extensor para este fin:

public static T GetParent<T>(this FrameworkElement element)
    where T : FrameworkElement
{
    while (element.Parent != null)
    {
        if (element.Parent is T)
            return (T)element.Parent;
        else
            element = element.Parent as FrameworkElement;
    }
    return null;
}

Una vez tengo el objeto ventana que contiene my UserContorl me subscribo a su evento LayoutUpdated. Este método extensor me vale también para encontrar el Canvas donde “bailan” los elementos, para poder obtener la posición relativa a este. Cada vez que la ventana se redimensione, se dispara el evento LayoutUpdated, pero no cuando se mueve, ya que lo que estoy modificando son las propiedades asociadas Canvas.Top y Canvas.Left, asi que me aseguraré de que cada vez que se mueve la ventana se llame a InvalidateMeasure() para se dispare el citado evento.

Ahora, en el manejador del evento LayoutUpdated que nos subscribimos, hay que actualizar la posición del DIV flotante cada vez que la ventana cambia. Dentro de mi UserControl, hay un control de tipo ContentControl  que he llamado YTContainer, que es donde el video deberá aparecer.  Gracias a TransformToVisual() podemos obtener cual es la posición relativa a un control de cualquiera de sus descendientes, aunque no sean descendientes directos, como es el caso (hay toda una jerarquia de Grids, ventanas y UserControl desde YTContainer al Canvas):

Point position = YTContainer.TransformToVisual(surface)
                           .Transform(new Point(0, 0));
 
player.Top = position.Y;
player.Left = position.X;
player.Width = YTContainer.ActualWidth;
player.Height = YTContainer.ActualHeight;

 De esa forma se que punto en el Canvas se corresponde con el punto relativo “0,0” de YTContainer, ya simplemente tengo que actualizar las propiedades del YoutubePlayer

Y nada más, se puede ver el resultado en mi emulador de escritorio. Investigaré porque no funciona en Internet Explorer.

Creo que también se puede hacer usando propiedades de dependencia y data binding…  

Integrar un video de YouTube en Silverlight 2| vtortola.NET

Deja un comentario

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