Video en HTML (III)
por Luciano Moreno, del departamento de diseño web de BJS ParaRed.

Inclusión de ficheros de video.-

El lenguaje HTML nos ofrece varias etiquetas de llamada a ficheros de video, unas para incrustarlos en la página, otras para ejecutarlos independientemente mediante el programa adecuado. Al igual que ocurre con otras etiquetas, cada una será válida para uno o más navegadores, parcial o totalmente, ya que cada casa fabricante ha ido ampliando el lenguaje HTML a su propio gusto o necesidad.

Etiqueta IMG

Internet Explorer habilitó la etiqueta estándar IMG para la inclusión de ficheros de video en el cuerpo de una página web, añadiéndole para ello los atributos siguientes:

• dynsrc="ruta_fichero_video", que especifica la localización del fichero, y donde ruta_fichero_video puede ser una ruta local relativa, una ruta a partir del directorio raíz del servidor web o una URL completa de localización del fichero en Internet.
  
  
• loop="n /infinite", que fija el número de veces que se debe visualizar el fichero de video (n veces o infinitas). El valor por defecto es 1.
  
  
• start="fileopen /mouseover", que establece si el fichero se debe empezar a ejecutar al abrir la página (valor por defecto) o cuando se pase el puntero del ratón sobre él.

También podemos encontrar en las referencias otros atributos, pero que sólo tienen efecto en versiones antiguas de Internet Explorer: controls, que teóricamente debería hacer aparecer los controles de la consola del visualizador, loopdelay="m", que especifica el tiempo en milisegundos (m) que hay entre una y otra reproducción del video.

Esta forma de presentar videos no es compatible con los navegadores Netscape, por lo que no se aconseja su uso. En caso de querer usarla, podemos especificar una imagen principal en la etiqueta IMG mediante su atributo SRC, de tal forma que en los navegadores Netscape se verá dicha imagen, mientras que en Internet Explorer se mostrará el video.

Ejemplo:

<img src="images/video_1.png" dynsrc="ejemplos/video_1.mpg" loop="2">

Que tenemos funcionando en esta ventana.

Además de los atributos anteriores, podemos usar los que admite una imagen estándar: align, border, width, height, etc., pero teniendo en cuenta que algunos de ellos se verán limitados a las características propias de un fichero de video. Por ejemplo, si modificamos la altura del video mediante el atributo height, la anchura del mismo también se modificará de forma equivalente, para mantener las proporciones originales.

Etiqueta EMBED

Otra forma de insertar un fichero de video en nuestras páginas es mediante la etiqueta EMBED, que ya vimos para la inclusión de audio. Funciona exactamente igual para ambos tipos de ficheros, con las salvedades propias de cada uno de ellos.

La introducción de este etiqueta para visualizar videos la llevó a cabo Netscape, pero en la práctica no funciona bien en sus navegadores, ya que al intentar ver un video mediante ella suele salir el típico mensaje de necesidad de instalación de un plugin especial. Tras descargar e instalar el plugin Quick Time, en las versiones 4x de Netscape Navigator sólo se visualizan bien los ficheros AVI, mientras que en las versiones 6x se visualizan también los ficheros MPEG.

Internet Explorer la soporta bien, aunque lanza diferentes visualizadores según el tipo de fichero, generalmente la consola de video de Media Player para los ficheros MPEG y la de Quick Time para los ficheros AVI.

En cuanto a los ficheros MOV, todos los navegadores precisan un plugin especial autoinstalable, que una vez instalado nos permite ver los videos con toda normalidad.

Los atributos principales de la etiqueta EMBED aplicada a ficheros de video son:

• src="ruta_fichero", que fija la ruta en la que se encuentra el fichero de video a reproducir. La ruta puede ser relativa a nuestro sistema de carpetas local, absoluta respecto el sistema de carpetas del servidor web o una URL completa que localice le fichero en Internet.
  
  
• loop="true/false", que determina el número de veces que se debe ejecutar el fichero de video. Los valores admitidos son true (infinitas veces) y false (sólo una vez).
  
  
• type="tipo_fichero", atributo importante, que declara el tipo de fichero de video que estamos usando, con lo que el navegador web puede ejecutar el programa o plugin adecuado para la reproducción del fichero. Puede ser video/avi, video/quicktime (.mov), video/mpeg, etc.
  
  
• pluginspage="URL", que establece, en caso de ser necesario un plugin especial para reproducir el fichero, la página web donde se puede descargar el mismo. Sólo se activa en el caso de que el navegador no sea capaz de reproducir el fichero por sí mismo.
  
  
• showcontrols="1/0" , que fija si se debe de ver (valor por defecto) o no la barra inferior de controles de la consola de video. Sólo funciona bien en Netscape 4x.
  
  
• showdisplay="1/0", que fija si se debe mostrar (valor por defecto) o no una banda inferior en la consola con información sobre el fichero de video (nombre, autor, copyright, etc.). Sólo funciona bien en Netscape 4x.
  
  
• showstatusbar="1/0", que fija si se debe mostrar (valor por defecto) o no una banda inferior en la consola con información temporal sobre la visualización del video y sobre el sonido del mismo. Sólo funciona bien en Netscape 4x.
  
  
• name="nombre", que asigna un nombre identificador (debe ser único en la página) a una etiqueta embed determinada, con objeto de ser accedida luego por lenguajes de script.
  
  
• volume="v", que determina el volumen de reproducción del sonido que acompaña al video, y que puede variar entre 0 y 100. Es sólo soportada por Netscape Navigator.
  
  
• width="w", que determina el ancho visible de la consola de video, en pixels. height="h", que determina el alto visible de la consola de video, en pixels.
  
  
• align="top/bottom/center/baseline/left/right/texttop/middle/absmiddle/absbotom", análogo al de la etiqueta IMG, define la alineación horizontal o vertical de la consola de video respecto de los elementos de la página.
  
  
• hspace="hs", que establece la separación horizontal, vspace="vs", que establece la separación vertical, en pixels, entre la consola y los elementos de la página que la rodean. Análoga a sus equivalentes de la etiqueta IMG.

Hay que mencionar que es muy importante establecer las dimensiones correctas del video mediante los atributos width y height, ya que si nos quedamos cortos (o no las especificamos), o no se visualiza el video o lo hace parcialmente, mientras que si nos pasamos en las medidas, el posicionamiento de la consola en la pantalla variará, perdiendo el control sobre el mismo. Además, si nuestra página tiene un fondo de color o de imagen, se vería un espacio blanco alrededor de la consola de video.

Ejemplo:

<embed src= "ejemplos/mov_1.mov"type="video/quicktime" autostart="True" width="165" height="140">

Que podemos ver trabajando en esta ventana.

Etiqueta OBJECT

Para intentar solucionar las incompatibilidades entre las etiquetas anteriores y los diferentes navegadores, el W3C sugirió, a partir de la salida del lenguaje HTML 4.0. el uso de la etiqueta estándar OBJECT para la inclusión de ficheros de video (al igual que para todo tipo de ficheros incrustados). Pero como siempre pasa, las recomendaciones no se han implementado correctamente en los diferentes navegadores web, siendo sólo Internet Explorer el que soporta correctamente la etiqueta OBJECT.

Esta etiqueta va a definir un objeto o componente externo encargado de la reproducción del fichero de video, que en el caso de Internet Explorer suele ser algún tipo de control ActiveX. Mediante object se instancia el objeto, se declara su URL y sus principales propiedades generales, y mediante un conjunto de etiquetas especiales, PARAM, se le van pasando los valores que necesita para su correcto funcionamiento o para su configuración deseada.

La sintaxis general de la etiqueta object, para el caso de ficheros de video, es del tipo:

<object atributo1="valor1" atributo2="valor2" ...atributoN="valorN">
   <param name="nombre" value="valor">
   <param name="nombre" value="valor">
   ...
</object>

Los principales atributos de object, en referencia a ficheros de video, son:

• classid="identificador_objeto", que fija el identificador CLSID de los controles ActiveX necesarios.
  
  
• codebase="URL", que fija la URL del objeto o componente externo necesario para reproducir el fichero de video.
  
  
• type="tipo_fichero", atributo importante, que declara el tipo de fichero de video que estamos usando.
  
  
• width="w", que determina el ancho visible de la consola de video, en pixels.
  
  
• height="h", que determina el alto visible de la consola de video, en pixels.
  
  
• align="top/bottom/center/baseline/left/right/texttop/middle/absmiddle/absbotom", análogo al de la etiqueta IMG, define la alineación horizontal o vertical de la consola respecto de los elementos de la página.
  
  
• hspace="hs", que establece la separación horizontal, vspace="vs", que establece la separación vertical, en pixels, entre la consola y los elementos de la página que la rodean. Análoga a sus equivalentes de la etiqueta IMG.
  
  
• autostart="true/false", que determina si el fichero de video debe empezar a reproducirse por sí sólo al cargarse la página o si por el contrario será preciso la actuación del usuario (o de código de script) para que comience la reproducción.
  
  
• standby="mensaje", que presenta en pantalla un mensaje al usuario mientras el fichero se carga.

En cuanto a los elementos param, los más importantes son:

• param name="filename" value="ruta_fichero" , que establece la ruta del fichero de video, en forma relativa a la estructura de carpetas del sitio web o en forma de URL absoluta.
  
  
• param name="showcontrols" value="1/0", que fija si se debe de ver (valor por defecto) o no la barra inferior de controles de la consola de video. Sólo funciona bien en Internet Explorer.
  
  
• param name="showdisplay" value="1/0", que fija si se debe mostrar (valor por defecto) o no una banda inferior en la consola con información sobre el fichero de video (nombre, autor, copyright, etc.). Sólo funciona bien en Internet Explorer.
  
  
• param name="showstatusbar" value="1/0", que fija si se debe mostrar (valor por defecto) o no una banda inferior en la consola con información temporal sobre la visualización del video y sobre el sonido del mismo. Sólo funciona bien en Internet Explorer.
  
  
• param name="autosize" value="1/0", que fija si el tamaño de la consola se establece automáticamente o no. Sólo funciona bien en Internet Explorer.
  
  
• param name="autostart" value="true/false" indica al navegador si se debe empezar a reproducir el video automáticamente al cargar la página o si por el contrario será preciso que el usuario pulse el botón Play para ello.

No son estos todos los atributos y parámetros posibles. Es más, en cuanto nos metemos en componentes Microsoft, podemos encontrarnos multitud de configuraciones posibles, que nos van a permitir fijar muchos aspectos de los mismos. Dejo a cada uno la posibilidad de profundizar en el estudio de aquellos componentes y propiedades que necesite, pero sabiendo que con los elementos vistos arriba tenemos más que suficiente para presentar un fichero de video en nuestra página web.

Ejemplo:

<object width="99" height="98" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112" standby="Cargando fichero..." type="application/x-oleobject">
<param name="filename" value="ejemplos/heart_1.avi">
<param name="showcontrols" value="0">
<param name="showdisplay" value="0">
<param name="showstatusbar" value="0">
<param name="autosize" value="0">
<param name="autostart" value="1">
</object>

Que podéis ver funcionando en esta ventana (sólo Internet Explorer).