Objetivos:
Esta última sesión práctica trata acerca de la integración de contenidos multimedia ofrecidos por un servidor de streaming (Helix Server) en la World Wide Web mediante la creación de contenidos multimedia insertados en páginas HTML.
Desarrollo:
o Arranca el servidor Helix Server (puede ser conveniente agruparse por parejas y que uno ejecute el servidor y otro reproduzca los contenidos servidos).
o Si la máquina en que trabajas no tiene ya instalados los navegadores Google Chrome,[1] Firefox[2], Opera[3] y Safari[4], vete descargándolos e instalándolos en paralelo al desarrollo de los puntos siguientes, para ganar tiempo.
o Crea una página web sencilla con un enlace rstp a un vídeo servido por Helix.
o Haz que la página que has creado sea servida también por Helix bajo http.
o Prueba a abrir la página que has creado desde un navegador web y a pinchar en el enlace.
o Abre la página anterior con RealPlayer y pincha en el hiperenlace.
o Conmuta entre las opciones del menú “Web” y “Reproducción en curso”.
o Crea una página info.html como la de más abajo con información sobre el vídeo.
<html>
<head>
<title>Información de vídeo 1</title>
</head>
<body>
<p>Aquí va la información del vídeo</p>
</body>
</html>
o Crea una nueva página de prueba cambiando el enlace al vídeo por el siguiente:
rtsp://127.0.0.1/realvideo10.rm?rpcontextheight=250&rpcontextwidth=280&rpcontexturl=http://127.0.0.1/httpfs/info.html
o Abre la nueva página con RealPlayer y pincha en el enlace.
o Conmuta de nuevo entre las opciones del menú “Web” y “Reproducción en curso”.
o Escribe un fichero HTML que contenga incrustados los siguientes objetos (nota, el classid de RealPlayer es clsid:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA)
- Una ventana donde mostrar el vídeo
- Un par de botones “play/stop” que muestren un vídeo en la ventana anterior
- Otro par de botones “play/stop” que muestren un vídeo diferente en la misma ventana
La forma de lograrlo es hacer que la ventana de vídeo esté asociada a la consola “_master”, y no lleve el parámetro src, mientras que cada una de las botoneras está asociada a una consola diferente y tiene un src diferente. Usa los apuntes de teoría como apoyo.
o Para agrupar los elementos anteriores crea una tabla de cuatro columnas y tres filas. Inserta la ventana de vídeo en la primera fila (con el atributo COLSPAN puedes lograr que la celda ocupe las cuatro columnas), en la segunda fila inserta los textos “Video 1” y “Video 2” haciendo que cada uno de estos textos ocupe dos columnas (de nuevo con el atributo COLSPAN) y finalmente, en la última fila, un botón en cada una de las celdas, de modo que los dos primeros botones sean el Play y Stop del “Vídeo 1” y los otros dos los correspondientes al “Vídeo 2”.
o Intenta visualizar la página anterior en diferentes navegadores (Internet Explorer, Firefox, Opera, Safari, Google Chrome) ¿alguno tiene problemas para mostrar el vídeo? Anota los resultados en la tabla que aparece en la última página de este documento.
o Repite la página anterior, pero usando la sintaxis “embed” en lugar de “object”. Esta sintaxis consiste en tener un solo tag (<embed>, que no requiere cierre), todos los parámetros necesarios, en forma de atributos nombre="valor". Para que el navegador pueda saber qué plugin tiene que activar, necesita conocer el tipo del medio que va a reproducir. Hay que indicárselo con el atributo type, que para el plugin de RealPlayer debe ser type="audio/x-pn-realaudio-plugin". Por ejemplo:
<embed
type="audio/x-pn-realaudio-plugin"
src="http://servidor.com/fichero"
height="250" width="540"
nojava="true"
controls="ImageWindow"
console="_master"
center="true"
pluginspage="http://www.real.com/">
</embed>
o Prueba esta nueva sintaxis en los mismos navegadores de antes ¿en cuáles encuentras ahora problemas? Consigna los resultados en la tabla de la última página.
o Finalmente combina la sintaxis de “object” con la sintaxis de “embed”, mediante el truco de introducir el tag <embed> dentro del grupo <object></object>. Comprueba ahora si te da problemas en algún navegador. Consigna los resultados en la tabla de la última página.
o Crea una página web que use la sintaxis <object> con un tag <embed> dentro de él (como has hecho en el último apartado del punto anterior), pero en esta ocasión para incrustar el reproductor Windows Media Player. El classid de este objeto es CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6. El tipo MiME es "application/x-mplayer2".
o El vídeo a incrustar lo tomaremos directamente de un servidor de vídeo de la Universidad de Oviedo, para no tener que instalar nuestro propio servidor, siendo su url mms://video.innova.uniovi.es/Encycloasturias/2009/250309_Tdt3d.wmv. Esta url se pasa al object mediante el parámetro “url”. Usa también los apuntes de teoría como apoyo.
o Realiza las pruebas de compatibilidad con los diferentes navegadores e incluye los resultados en la tabla de la última página. Para conseguir la compatibilidad en algunos casos (y no solo el de Firefox) puede ser necesaria la instalación del “Windows Media Player Firefox Plugin”.
o Crea una página web que use la sintaxis <object> con un tag <embed> dentro de él (como has hecho en el punto anterior), pero en esta ocasión para incrustar un objeto Adobe Flash Player. Su classid es clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 y su tipo MIME es application/x-shockwave-flash.
o El código a “ejecutar” por el plugin de Adobe se obtendrá de la url http://releases/flowplayer.org/swf/flowplayer-3.2.5.swf. Se trata de un reproductor de vídeo implementado en Flash. Esta url se pasa a través del parámetro movie. El vídeo a reproducir ha de ser http://www.mediacollege.com/video-gallery/testclips/20051210-w50s.flv.
o La forma de pasarle parámetros a este reproductor se detalla en la web de FlowPlayer (http://flowplayer.org/demos/installation/alternate/index.html). Estúdialo y adáptalo a la página que estás creando. Usa también los apuntes de teoría como apoyo.
o Visualiza la página con los diferentes navegadores e incluye los resultados en la tabla.
o Incrusta ahora una animación flash haciendo uso del plugin del navegador para reproducirla, es decir, sin necesidad de utilizar flowplayer. En este caso simplemente pasamos a través del parámetro movie el archivo a reproducir. Utiliza la animación de ejemplo de la práctica 3, visualiza la página creada con los diferentes navegadores e incluye los resultados en la tabla.
o Prueba a crear una página que incluya sólo el siguiente código mínimo, en el que se han omitido algunos atributos típicos de un objeto incrustado, como su classid o su type, dejando tan sólo el campo data. Algunos navegadores pese a todo podrán mostrar correctamente el vídeo. Anota en la tabla qué navegadores lo muestran.
<object width="400" height="324" data="http://www.youtube.com/v/oHg5SJYRHA0">
<embed src="http://www.youtube.com/v/oHg5SJYRHA0">
</object>
o Observa el siguiente código, el cual incrusta un objeto RealPlayer (sólo la ventana de vídeo) y tres botones textuales para controlarlo. Mediante el atributo onClic de estos botones, se ejecuta una función JavaScript cuando el usuario pulse uno de ellos. Esta función controla el objeto RealPlayer, el cual se identifica mediante un nombre que se asigna con el atributo name dentro del object.
<object name="pelicula"
classid="clsid:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA"
height="240" width="330">
<param name="src" value="rtsp://servidor/fichero.rv" />
<param name="backgroundcolor" value="#000" />
<param name="center" value="true" />
<param name="autostart" value="false" />
<param name="controls" value="ImageWindow" />
<param name="console" value="_master" />
</object>
<input type="button" value="Play" onclick="document.pelicula.DoPlay()" />
<input type="button" value="Pause" onclick="document.pelicula.DoPause()" />
<input type="button" value="Stop" onclick="document.pelicula.DoStop()" />
o Copia el código anterior en un fichero html y adáptalo mara mostrar uno de los vídeos servidos por Helix. Comprueba cómo se puede controlar la reproducción con los botones de texto.
o Cambia los botones de texto por tres imágenes (Player_play.png, Player_pause.png y Player_stop.png) que sirvan para controlar el vídeo. Para ello tendrás que utilizar type=”image” src=”nombre_imagen.png”.
Tabla resumen con los resultados de los experimentos
|
Ejemplo |
Navegador |
Se muestra |
No
se |
|
RealPlayer con sintaxis solo <object> |
Internet Explorer |
|
|
|
Firefox |
|
|
|
|
Opera |
|
|
|
|
Google Chrome |
|
|
|
|
Safari |
|
|
|
|
RealPlayer con sintaxis solo <embed> |
Internet Explorer |
|
|
|
Firefox |
|
|
|
|
Opera |
|
|
|
|
Google Chrome |
|
|
|
|
Safari |
|
|
|
|
RealPlayer con sintaxis combinada <object> y <embed> |
Internet Explorer |
|
|
|
Firefox |
|
|
|
|
Opera |
|
|
|
|
Google Chrome |
|
|
|
|
Safari |
|
|
|
|
Windows Media Player con sintaxis combinada <object> y <embed> |
Internet Explorer |
|
|
|
Firefox |
|
|
|
|
Opera |
|
|
|
|
Google Chrome |
|
|
|
|
Safari |
|
|
|
|
Flash con flowplayer y sintaxis combinada <object> y <embed> |
Internet Explorer |
|
|
|
Firefox |
|
|
|
|
Opera |
|
|
|
|
Google Chrome |
|
|
|
|
Safari |
|
|
|
|
Flash básico con sintaxis combinada <object> y <embed> |
Internet Explorer |
|
|
|
Firefox |
|
|
|
|
Opera |
|
|
|
|
Google Chrome |
|
|
|
|
Safari |
|
|
|
|
Flash mínimalista (youtube) |
Internet Explorer |
|
|
|
Firefox |
|
|
|
|
Opera |
|
|
|
|
Google Chrome |
|
|
|
|
Safari |
|
|
Trabajo a entregar: