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

Integrar un video de YouTube en Silverlight 2

por vtortola domingo, 17 de mayo de 2009
silveryoutubemini

 Me pareció tan curioso que me decidí a probarlo :D 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 :P

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

Actualmente calificado 4.8 por 4 persona(s)

  • Currently 4,75/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

C# 3.0 | .NET 3.5 | Silverlight 2

Related posts

Comentarios

mayo 17. 2009 14:06

pingback

Pingback from elbruno.com

Integrar un video de YouTube en Silverlight 2 - vtortola

elbruno.com

mayo 17. 2009 14:12

pingback

Pingback from geeks.ms

Integrar un video de YouTube en Silverlight 2 - Pensando en asíncrono

geeks.ms

mayo 21. 2009 09:09

Gravatar

It seems to me that this is a very useful article, but I have little to understand. Could you translate this article in English.

cleaning us

mayo 26. 2009 10:27

Gravatar

Hi cleaning,

Try with the Google Translator: http://translate.google.es/translate?u=http%3A%2F%2Fwww.vtortola.net%2Fpost%2FIntegrar-un-video-de-YouTube-en-Silverlight-2.aspx&sl=es&tl=en&hl=es&ie=UTF-8

vtortola us

Comments are closed

Powered by BlogEngine.NET 1.1.1.8
This theme is a variation of Mads Kristensen by Valeriano Tórtola

Valeriano Tórtola

Personal Ver perfil
E-mail Enviar correo
LinkedIn LinkedIn
Fotos Fotos
MCPD

Publicidad

Posts recientes

Disclaimer

Las opiniones mostradas aqui son mis opniones y no representan el punto de vista de mi empresa en ninguna forma.

Creative Commons License

Esta obra está bajo una licencia de Creative Commons

Locations of visitors to this page

© Copyright 2010

Sign in

Calendario

<<  marzo 2010  >>
lumamijuvido
22232425262728
1234567
891011121314
15161718192021
22232425262728
2930311234

Ver en calendario extendido