Por Alejandro Hidalgo Fernández

Video en Silverlight 3

Una de las mejores características que aporta Silverlight es la gran cantidad de soportes de video y audio que tiene. Esta nueva versión no iba a estar exenta de mejoras en este campo, con novedades como soporte para codificación H.264 y AAC. También se ha añadido soporte para RAW audio y video, de tal manera que se habilita la posibilidad de utilizar codecs de terceros.

Entre las novedades también podemos encontrar el Smooth Streaming, que permite el streaming de video en alta definición adaptándose al ancho de banda del usuario, lo que permite que la visión sea mucho más fluida. De todas maneras el Smooth Streaming no es el objetivo de este tutorial, si quieren ver un ejemplo: http://www.smoothhd.com/.

Durante este tutorial pretendemos mostrar cómo se puede añadir un reproductor de video Silverlight para reproducir un video de alta definición. Y luego crearemos nuestro propio reproductor de video en Silverlight 3.

Lo primero será abrir el Microsoft Expression Encoder 3 y tras crear un nuevo proyecto importamos nuestro video en HD. El video en HD que usaremos para la demo puede ser descargado en:

http://www.microsoft.com/windows/windowsmedia/musicandvideo/hdvideo/contentshowcase.aspx

En este ejemplo no será necesario realizar ningún cambio en la codificación del video, pero invitamos a todos los usuarios a probar las nuevas funcionalidades de codificación que trae Expression Encoder 3. En este ejemplo, sólo queremos mostrar lo rápido que se puede tener un reproductor Silverlight con el video HD que tenemos. Si nos dirigimos a la pestaña de Metadata como se ve en la siguiente imagen, podemos añadir Markers, que son marcas de referencia. Elegimos un punto en nuestro video, a los 10 segundos por ejemplo, y pulsamos sobre el símbolo “+” que aparece en el panel Markers. Añadimos varios, seleccionando en cada uno que tenga Thumbnail, esto generará una pequeña imagen del marcador creado para que después podamos usarlo como capítulos de nuestro video.

A continuación, elegiremos el estilo del reproductor que queremos que aparezca con nuestro video. Para ello seleccionamos en la pestaña Output (Salida) y en Job Output elegimos el template que más nos guste viendo su vista previa en la parte inferior. En nuestro caso hemos seleccionado el Corporate Silver. También podemos elegir la carpeta destino donde queremos almacenar la salida, nosotros lo dejaremos como está y dejamos marcado la pre visualización en el navegador.

 Por último, pulsamos sobre Encode lo que producirá una codificación del video en caso de que hayamos cambiado algún parámetro y generará una salida

Siguiendo con el tutorial ahora abriremos Microsoft Expression Blend para crear nuestro propio reproductor de video en Silverlight 3. Creamos un nuevo proyecto Silverlight 3 con su aplicación web y añadimos al proyecto web el video y las imágenes obtenidas del ejemplo anterior.

Para el reproductor lo primero que necesitamos es un control MediaPlayer sobre el que realizaremos un cambio de Template para adaptarlo a nuestras preferencias. Necesitaremos las librerías MediaPlayer.dll y ExpressionPlayer.dll, para ello nos dirigiremos al directorio:

C:\Program Files\Microsoft Expression\Encoder 3\Templates\en\CorporateSilver\Source

Y abriremos y compilaremos la solución, obteniendo en la carpeta Bin las dos librerías que necesitamos. En el MainPage.xaml referenciaremos ambos espacios de nombres:

xmlns:expression="clr-namespace:ExpressionMediaPlayer;assembly=ExpressionPlayer"

xmlns:ExpressionMediaPlayer="clr-namespace:ExpressionMediaPlayer;assembly=MediaPlayer"

Para que quede major pondremos un control de borde (border) con las esquinas redondeadas y dentro colocaremos nuestro reproductor de la siguiente forma.

<Border CornerRadius="8" Width="750" Height="500" Canvas.Left="25" Canvas.Top="25" OpacityMask="Black">

<Border.Background>

<LinearGradientBrushEndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FF531F1F" Offset="0"/>

<GradientStop Color="White" Offset="0.83"/>

<GradientStop Color="#FFCEB3B3" Offset="0.422"/>

                    <GradientStop Color="#FFCEB3B3" Offset="0.426"/>

                    <GradientStop Color="#FFCFB4B4" Offset="1"/>

             </LinearGradientBrush>

       </Border.Background>

       <Canvas>

<expression:ExpressionPlayer Margin="25,25,0,0" Width="700" Height="450" Style="{StaticResourceExpressionPlayerStyle}">

              <expression:ExpressionPlayer.Playlist>

             <ExpressionMediaPlayer:Playlist StretchMode="Fill" >

                    <ExpressionMediaPlayer:Playlist.Items >

                           <ExpressionMediaPlayer:PlaylistItem x:Name="videoHD"

                           Title="Video HD" ThumbSource="Preview.png"                                       MediaSource="Coral_Reef_Adventure_720.wmv">

                           </ExpressionMediaPlayer:PlaylistItem>

                    </ExpressionMediaPlayer:Playlist.Items>

             </ExpressionMediaPlayer:Playlist>

             </expression:ExpressionPlayer.Playlist>

       </expression:ExpressionPlayer>

       </Canvas>

</Border>

Si lo ejecutamos veremos el mismo resultado que tuvimos cuando codificamos con el Expression Encoder 3, sólo que ahora podemos manipular el reproductor e incorporarlo a nuestra aplicación de negocio. Para añadir los capítulos, añadimos dentro PlaylistItem:

<ExpressionMediaPlayer:PlaylistItem.Chapters>

       <ExpressionMediaPlayer:ChapterItem x:Name="capitulo1" Position="9.84"

       Title="Mar" ThumbSource="Coral_Reef_Adventure_720_9.840.jpg" />

       <ExpressionMediaPlayer:ChapterItem x:Name="capitulo2" Position="21.43"

Title="Coral" ThumbSource="Coral_Reef_Adventure_720_21.437.jpg"/>

       <ExpressionMediaPlayer:ChapterItem x:Name="capitulo3" Position="35.72"

       Title="Cuevas" ThumbSource="Coral_Reef_Adventure_720_35.729.jpg"/>

<ExpressionMediaPlayer:ChapterItem x:Name="capitulo4" Position="55.17"

Title="Error humano" ThumbSource="Coral_Reef_Adventure_720_55.175.jpg"/>

       <ExpressionMediaPlayer:ChapterItem x:Name="capitulo5" Position="73.33"

       Title="Peces" ThumbSource="Coral_Reef_Adventure_720_73.332.jpg"/>

       <ExpressionMediaPlayer:ChapterItem x:Name="capitulo6" Position="87.38"

       Title="Montañas" ThumbSource="Coral_Reef_Adventure_720_87.389.jpg"/>

       <ExpressionMediaPlayer:ChapterItem x:Name="capitulo7" Position="94.65"

       Title="Cielo" ThumbSource="Coral_Reef_Adventure_720_94.652.jpg"/>

</ExpressionMediaPlayer:PlaylistItem.Chapters>

Si quisiéramos cambiar el diseño o las animaciones de nuestro reproductor simplemente tenemos que seleccionar el reproductor de video y con el menú contextual seleccionamos Edit Template -> Edit a Copy como se puede ver en la imagen.

Aunque no nos vamos a extender con todo el código de estilo que se genera, nosotros rápidamente cambiaremos los colores de los botones y los fondos a rojo para dar un nuevo look a nuestro reproductor.

Código fuente del tutorial

Descargar tutorial y código fuente en C#
Descargar tutorial y código fuente en VB