Utilizando capítulos (marcadores de tiempo) con el control Media de ASP.NET Futures

Después del artículo de introducción al control Media de ASP.NET Futures, he seguido investigando un poco con este control y he descubierto una característica muy interesante, consistente en la posibilidad de definir marcadores o capítulos para puntos de tiempo asociados a la reproducción, los cuales nos permitirán durante la ejecución, saltar directamente a los momentos que hayamos definido.


Un capítulo se compone de una imagen y un momento de tiempo. El conjunto de capítulos que asociemos a un control Media se denomina menú de capítulos, y se visualizará en forma de tira de imágenes encima de la zona de reproducción de video. El lugar preciso en el que se mostrará el menú de capítulos depende del skin empleado.


Para crear un capítulo dentro del código aspx de la página utilizaremos la etiqueta MediaChapter, asignando la imagen correspondiente al capítulo mediante la propiedad ImageUrl. Para el salto de tiempo usaremos la propiedad TimeIndex, asignando un valor en formato de segundos. Adicionalmente podemos dar un nombre al capítulo mediante su propiedad Title, y por último situaremos todos los MediaChapter dentro de las etiquetas Chapters del control Media, como vemos en el siguiente bloque de código.


<cc1:Media ID=”medReproductor” runat=”server” Width=”400px” Height=”325px” MediaUrl=”Kameo.wmv”
MediaSkin=”Professional” AutoPlay=”True”>
<Chapters>
<cc1:MediaChapter ImageUrl=”Capitulo1.jpg” TimeIndex=”12.0″ Title=”Capítulo 1″ />
<cc1:MediaChapter ImageUrl=”Capitulo2.jpg” TimeIndex=”36.0″ Title=”Capítulo 2″ />
<cc1:MediaChapter ImageUrl=”Capitulo3.jpg” TimeIndex=”65.0″ Title=”Capítulo 3″ />
<cc1:MediaChapter ImageUrl=”Capitulo4.jpg” TimeIndex=”73.0″ Title=”Capítulo 4″ />
</Chapters>
</cc1:Media>

Si resulta más conveniente, también podemos agregar los capítulos desde el code-behind de la página, empleando la clase MediaChapter y la colección Chapters del control.


this.medReproductor.Chapters.Add(new MediaChapter(“Capitulo 1”, 12.0, “Capitulo1.jpg”));
this.medReproductor.Chapters.Add(new MediaChapter(“Capitulo 2”, 36.0, “Capitulo2.jpg”));
this.medReproductor.Chapters.Add(new MediaChapter(“Capitulo 3”, 65.0, “Capitulo3.jpg”));
this.medReproductor.Chapters.Add(new MediaChapter(“Capitulo 4”, 73.0, “Capitulo4.jpg”));

El resultado en tiempo de ejecución podemos apreciarlo en la siguiente imagen, donde el control Media utiliza el skin Professional, que visualiza el menú de capítulos al situar el cursor en la parte inferior de la zona de video.



En otros tipos de skin se proporciona un botón para desplegar el menú de capítulos, como los que podemos ver a continuación.



El proyecto correspondiente a este ejemplo puede descargarse en este enlace.


 


Reproducir audio combinado con imágenes.


Pero supongamos que en lugar de video, lo que necesitamos es reproducir un archivo de audio, con la particularidad de que durante la reproducción, el usuario debe ir visualizando un conjunto de imágenes.


Podemos utilizar el control Media y asignar las imágenes como capítulos, sin embargo, el usuario solamente podrá ver dichas imágenes en el menú de capítulos, mientras que lo que realmente sería deseable es que se visualizaran en el panel de video del control.


Para resolver este problema, una posible solución sería recurrir a Windows Movie Maker, una aplicación que en Windows Vista viene incorporada por defecto, mientras que en Windows XP puede ser descargada como actualización.


Mediante Windows Movie Maker podemos crear un proyecto donde combinemos el archivo de audio junto a las imágenes, indicando los momentos de la reproducción en los que se realizará una transición de imágenes. A continuación vemos la interfaz de usuario de esta aplicación.



Una vez creada la combinación de imágenes y audio, seleccionaremos la opción de publicación en el equipo local, para generar un archivo wmv que será el que utilicemos con el control Media.


<cc1:Media ID=”medReproductor” runat=”server” Width=”320px” Height=”240px”
MediaUrl=”SonidoDiapositivas.wmv”
MediaSkin=”Expression” AutoPlay=”True” />

Al reproducir ahora este archivo desde nuestra página, en el fondo del control Media se irá produciendo la transición de imágenes esperada.



Un saludo.

5 Comentarios

  1. anonymous

    Como fecha es?

  2. lmblanco

    Hola alexandre

    No comprendo muy bien tu pregunta, ¿a qué te refieres cuando hablas acerca de la fecha?

    Un saludo,
    Luismi

  3. anonymous

    me podrias decir donde puedo descargar el control Media de ASP.NET Futures

  4. anonymous

    donde puedo descargar el control Media de ASP.NET Futures

  5. lmblanco

    Hola Diego

    El enlace para descargar ASP.NET Futures es el siguiente:

    http://www.microsoft.com/downloads/en/details.aspx?FamilyID=9323777e-fe78-430c-ad92-d5be5b5ead98&DisplayLang=en

    Un saludo,
    Luismi

Leave a Reply

Tema creado por Anders Norén