Clase 13 - Elementos multimedia

SAVE OFFLINE

Elementos multimedia Aunque hoy en día todavía no hay un estándar de vídeo que se haya impuesto a los demás, podemos decir, sin miedo a equivocarnos, que los formatos de vídeo más populares en la Web son QuickTime y RealVideo. A lo largo del siguiente capítulo, veremos que el usuario podrá descargar un vídeo y reproducirlo a continuación mediante algún programa auxiliar como el Reproductor multimedia de Windows. También aprenderemos a colocar vídeos de QuickTime directamente en un documento HTML y por último, le mostraremos cómo reproducir vídeos con RealPlayer, que es un sistema de flujo de vídeo continuo que nos permitirá reproducir una película a medida que la estamos descargando. Para finalizar, vamos a ver cómo insertar elementos multimedia cómo animaciones Flash o un sonido. Vídeo en la red A cualquier persona que no esté un poco familiarizada con los PC e Internet, le resultará difícil entender que con la tecnología que se ha desarrollado para la Web, no pueda incorporarse algo tan elemental como un vídeo. Las complicaciones se deben fundamentalmente a que la conversión digital de cualquier archivo de vídeo analógico supone un volumen de datos enorme. Para solucionar este problema, se han desarrollado varias estrategias que nos permitirán la creación, almacenamiento y reproducción de vídeos digitales. Estas estrategias consisten en la utilización de diferentes formatos de archivos, lo cual implica que el usuario debe de disponer de un sistema de reproducción adecuado al tipo de archivo que desee ver. A continuación, pasaremos a explicar brevemente los distintos formatos de vídeo más utilizados en la red: MPEG: Desarrollado por Motion Picture Experts Group, este formato es a las imágenes en movimiento, lo que el formato JPEG a las imágenes fijas. Las extensiones utilizadas para este tipo de archivos son *.mpg y *.mpeg. QuickTime: Desarrollado originalmente por Apple como una solución multiplataforma, es uno de los más populares en la red. Además del QuickTime normal, Apple ha desarrollado el QuickTime VR, que proporciona una visión panorámica interactiva. Las extensiones utilizadas para este tipo de archivos son *.qt y *.mov.

RealVideo: Desarrollado por RealNetworks, permite la reproducción continua tanto de audio como de vídeo. Las extensiones utilizadas para este tipo de archivos son *.ra, *.rpm y *.ram. Video for Windows: Desarrollado por Microsoft para ser utilizado con los reproductores instalados en los sistemas operativos Windows, tiene la finalidad de reproducir cualquier archivo *.avi. Flash Video (FLV): Es el formato de vídeo utilizado para transmitir video por Internet usando Adobe Flash Player. Utiliza la extensión de archivo *.flv o pueden ser incrustados dentro de archivos *.swf. Entre los sitios más notables que utilizan el formato FLV se encuentran YouTube, Google Video, Reuters.com, Yahoo! Video y MySpace. Vincular vídeos en Dreamweaver Una vez que tenemos digitalizado el vídeo, la forma más sencilla de que esté disponible en nuestra Web es tratarlo como un enlace cualquiera. De este modo, cuando alguien seleccione el enlace, podrá descargar el vídeo en su PC. Reproducción de vídeos on line El navegador Internet Explorer de Microsoft soporta el atributo dynsrc que es capaz de reproducir un vídeo on-line. Los vídeos se verán dentro de la misma página Web junto con el resto de elementos del documento como texto e imágenes. El atributo se insertará en la etiqueta

de la siguiente manera:

Con esta sintaxis, en un navegador que no soporte el atributo dynsrc, se representará la imagen referenciada, mientras que, en el navegador Internet Explorer, se reproducirá automáticamente el vídeo. Visualizar un vídeo directamente desde la Web: 1. Coloque el cursor del ratón en el lugar de la ventana de documento en el que quiera insertar la imagen. 2. Si la paleta Insertar no se encontrara abierta, diríjase al menú Ventana y escoja la opción Insertar. 3. Asegúrese de que la categoría Común esté activa en el panel y haga clic en el botónImágenes: Imagen.

4. Cuando se abra el cuadro de diálogo Seleccionar origen de imagen, localice y cargue la imagen que quiera insertar. 5. En la parte superior de la ventana de documento, pulse el botón Código. 6. Localice la etiqueta y añada el código del atributo dynsrc. Recuerde que en este atributo debe especificar la ruta del archivo de vídeo.

7. Si su navegador no soporta el atributo dynsrc al visualizar la página, se representará la imagen que insertó anteriormente. Atributos de QuickTime Para poder visualizar una película de QuickTime en una página Web, los visitantes necesitan tener instalado un plug-in de QuickTime. Las instrucciones necesarias para insertar cualquier contenido que requiera un plug-in se almacenarán en la etiqueta . Añadir una película QuickTime a un documento de Dreamweaver: 1. Sitúe el cursor del ratón donde quiera insertar el vídeo de QuickTime.

2. Despliegue el menú Insertar de la barra de menús y seleccione la opción Media. 3. En el submenú que se muestra, presione sobre la orden Plug-in. Se abre el cuadro de diálogo Seleccionar archivo. 4. En el campo de edición Nombre, escriba el nombre y la ruta de acceso del archivo QuickTime que desea abrir. 5.

Para terminar, pulse Aceptar.

6. En el panel Propiedades, introduzca la anchura y la altura en los campos de ediciónAn y Al.

7. En el campo de edición URL plg, escriba la dirección de Internet a la que desee que se dirijan los visitantes que no tengan instalado el plug-in requerido. Para las películas de QuickTime, la dirección eshttp://www.apple.com/quicktime/download/. 8. Para finalizar, si lo desea y para comprobar que todo es correcto, pulse el botón Reproducir para previsualizar la película del mismo modo que ocurriría si estuviera en la red. 9. Si lo deseamos, podremos pulsar el botón Parámetros para configurar losparámetros de QuickTime. Observe la tabla que aparece a continuación; en ella, se explicarán los parámetros que podremos utilizar:

Insertar RealVídeo en un documento HTML El primer sistema de flujo de vídeo lo desarrolló RealNetworks. Esta empresa ofrece un reproductor multimedia gratuito llamado RealPlayer para poder ver o escuchar el contenido de estos sistemas. RealVideo utiliza su propio software de servidor (RealServer) para transmitir archivos de vídeo codificados. En vez de llamar al archivo de vídeo directamente, RealVideo utiliza un sistema de meta archivos para enlazar con el servidor y el archivo de vídeo. Un meta archivo no es más que un archivo de texto donde se especifica el URL que apunta al servidor y al archivo de vídeo. A continuación, puede ver las distintas extensiones que utiliza este sistema: 

*.rm: Archivo de RealVideo.



*.ra: Archivo de RealAudio.



*.ram: Meta archivo que ejecuta una sesión independiente de

RealPlayer. 

*.rpm: Meta archivo que carga el plug-in de RealPlayer.

Crear un meta archivo de RealVideo: Abra un editor de texto y escriba las líneas necesarias para apuntar al servidor y al vídeo que desea visualizar.

RealVideo direcciona usando el protocolo rtsp:// (Real Time Streaming Protocol). El archivo de texto contendrá líneas de la siguiente forma genérica: rtsp://servidor/ruta/archivo Así, por ejemplo, si queremos reproducir un vídeo concreto, el meta archivo indicará la ruta donde se encuentra el vídeo a visualizar. Insertar RealVideo usando un enlace: 1. Seleccione el texto o la imagen que desee utilizar como enlace al archivo de vídeo. 2. Si el panel Propiedades no se encontrara abierto, diríjase al menú Ventana y escoja la opción Propiedades 3. En el campo de edición Vínculo, escriba la ruta y el nombre de archivo de vídeo o haga clic en el icono de carpeta, situado a la derecha de dicho campo, para localizar y seleccionar un archivo. Inserción de archivos FLV Con Dreamweaver podremos añadir fácilmente vídeos FLV a las páginas Web sin necesidad de utilizar la herramienta de creación de Flash. Para poder empezar, debe disponer de un archivo FLV codificado. El programa se encargara de insertar un componente SWF que muestra el archivo FLV; cuando se visualiza en un navegador, este componente muestra el archivo FLV seleccionado, así como un conjunto de controles de reproducción. Dreamweaver ofrece las opciones siguientes para mostrar vídeo FLV a los visitantes de su sitio: Descarga progresiva de vídeo: Descarga el archivo FLV en el disco duro del visitante del sitio y lo reproduce. Sin embargo, a diferencia de los métodos tradicionales de entrega de vídeo de tipo “descarga y reproducción”, la descarga progresiva permite iniciar la reproducción del archivo de vídeo antes de que haya finalizado la descarga. Flujo de vídeo: Transfiere el contenido de vídeo y lo reproduce en una página Web transcurrido un breve periodo de búfer que garantice una reproducción fluida. Para activar el flujo de vídeo en las páginas Web, debe tener acceso a Adobe® Flash® Media Server. Debe contar con un archivo FLV codificado para poder utilizarlo en Dreamweaver. NOTA: Al igual que sucede con los archivos SWF, al insertar un archivo FLV, Dreamweaver inserta código que detecta si el usuario dispone de la versión correcta de Flash Player para ver el vídeo. Si el usuario carece de la versión

correcta, la página muestra contenido alternativo que solicita al usuario que descargue la versión más reciente de Flash Player. Películas Flash Las películas Flash son animaciones, cuyos archivos tienen las extensiones SWF. Es frecuente verlas en las páginas iniciales de los sitios web, a modo de presentación hacia los usuarios, asi como en banners publicitarios o en botones. Flash es el elemento multimedia más empleado en las páginas web que se desarrollan hoy día. Estas películas pueden crearse mediante el programa Adobe Flash. Para poder ser visualizadas por el navegador es necesario que el usuario tenga instalado el plug-in de Flash Player. Su instalación es muy sencilla y normalmente ya viene con el navegador o puede hacerlo directamente desde Internet. Insertar una película de Flash en un documento de Dreamweaver: 1. En el menú Insertar seleccione la opción Media y a continuación en el nuevo submenú que aparece escoja la opción SWF o pulse la combinación de teclas pulsando CTRL+ALT+F. 2. En el cuadro de diálogo Seleccionar SWF localice el archivo de Flash que desee insertar en nuestro documento y pulse sobre el botón Aceptar. 3. Al insertarse la película, veremos la ubicación en la vista de diseño con el siguiente aspecto:

4. Veamos las opciones más importantes que nos ofrece el panel Propiedades cuando tenemos seleccionado el archivo Flash que acabamos de abrir.

5. Si disponemos de Flash instalado en el equipo, y vamos a ir haciendo cambios sobre el archivo original (.fla), nos resultará muy útil indicar su ubicación en Origen. Así, para editarlo, bastará con pulsar el botón Editar. 6. La opción Bucle indica que al finalizar la película, ésta volverá a comenzar desde el principio. 7. La otra es la opción Reproducción automática, que al estar activada por defecto y que indica que nada más cargarse la página comenzará a reproducirse la película Flash dentro de la página. Si esta opción no estuviera activada, se mostraría únicamente el primer fotograma de la película hasta que el usuario la activase. Por tanto interesa desactivar esta opción cuando se desea que la reproducción sea activada por algún comportamiento. 8. El desplegable Calidad nos permite configurar la calidad de visualización del archivo SWF, cuanto más baja sea la calidad, antes se cargará el archivo pero peor se verá. Conviene dejarla en Alta para verlo tal cuál se creó. 9. Con el desplegable Escala podremos elegir cuanto se verá del archivo. Las películas Flash no siempre son del tamaño exacto del contenido, pueden tener un escenario de fondo alrededor del objeto, aunque no se muestre. Si dejamos Predeterminada, se verá toda la película. En cambio, si elegimos Ajuste exacto, se verán sólo los objetos, omitiendo el escenario de fondo. 10. El desplegable Alinear funciona como con las imágenes, y nos permite alinear la película en relación con el texto. Si queremos centrarla horizontalmente, podemos optar por centrar el contenido del elemento que contiene el Flash (normalmente un párrafo) empleando CSS. 11. Wmode es el modo de ventana. Si es opaco, otros elementos pueden aparecer sobre el Flash. En cambio, si es transparente, el fondo se verá transparente (a no ser que se haya especificado un color de fondo en el Flash). 12.

El botón Reproducir nos permite ver la película.

NOTA: Al insertarse animaciones Flash, es frecuente que Dreamweaver añada algunos archivos que nos permitirán reproducir los elementos, normalmente creando la carpeta Scripts. Es importante incluir esta carpeta cuando publiquemos nuestro sitio, si no los archivos no se verán. De todas formas, Dreamweaver nos avisará cuando incluya archivos. Sonido Hoy día no es muy usual incluir sonidos en una página Web, ya que algunos usuarios suelen estar escuchando su propia música cuando navegan en Internet, por lo que el escuchar también sonido en cada página que se visita puede resultar algo molesto. A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la página, puede hacerla más atractiva. Las páginas que contienen sonido suelen ofrecer la posibilidad de activarlo o desactivarlo, para que aquellos usuarios que no deseen escuchar el sonido de la página puedan anularlo. Siempre es mejor poder hacer eso que el usuario abandone la página amargado por dicha música que no siempre tiene porque ser de su gusto. Los formatos de sonido más habituales en Internet son, fundamentalmente, el MP3, el WAV y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que también pueden utilizarse. Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad. NOTA: En el caso de no especificar ningún tamaño, se mostrará el tamaño por defecto de los controles, como ocurre en el ejemplo de arriba. Si lo que se desea es que se escuche el sonido en la página, pero que no se muestren los controles de audio, los campos Al y An deben valer cero. Lo más habitual en la Web es insertar el sonido empleando archivos de Flash. Esto hace que no se necesiten plugins, sólo poder reproducir archivos SWF. Además, nos permite crear los controles de una forma personalizada. Práctica: Diseño Web parte IX A lo largo de esta nueva práctica, aprenderemos a vincular y a visualizar vídeos en documentos HTML. Para ello, empezaremos diseñando el documento “Trailers.htm” que vincularemos al menú de la página principal. A continuación, aprenderemos a colocar vídeos en un documento utilizando el atributo dynsrc. Utilizaremos los plug-ins de Dreamweaver para reproducir vídeos QuickTime directamente en un documento HTML y, para finalizar, veremos la forma de

vincular un vídeo de RealPlayer de forma directa o utilizando un meta archivo que llame a un vídeo que se encuentre en un servidor.