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

Compatibilizando etiquetas.-

Según hemos visto, cada navegador soporta sus propias etiquetas y atributos a la hora de integrar un fichero de video en el cuerpo de una página web. Netscape 4x no reconoce la etiqueta OBJECT, Internet Explorer no reconoce bien embed en ciertos tipos de fichero y Netscape 6x, tres cuartas de lo mismo. Entonces nos preguntaremos ¿cómo podemos implementar un video compatible con Internet Explorer y Netscape?.

Buena pregunta, y de difícil solución. Lo mejor que podemos hacer podemos resumirlo en los siguientes puntos:

1. Si el fichero de video está en formato AVI, incrustaremos el video mediante la etiqueta EMBED, y procuraremos hacerlo en su sintaxis más simple:

<embed src="ejemplos/heart_1.avi" showControls="0" showdisplay="0" showstatusbar="0" width="176" height="144" autostart="true"></embed>

Ponemos el atributo autostart a true porque a veces Netscape 4x no inicia adecuadamente la visualización automática si no lo especificamos, y tenemos especial cuidado en el tamaño (width y height) que asignamos a la consola. Si disponemos del pluginde QuickTime, no tenemos porqué encontrar problemas.

La única pega es que en Internet Explorer no podemos quitarla barra de controlesde la consola. Una solución sería incrustar el video usando la etiqueta EMBED incluida dentro de OBJECT, con lo que haremos que se ejecute ésta última en Internet Explorer, por medio de Windows Media y la primera en los navegadores Netscape, como antes:

<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">
  <embed src="ejemplos/heart_1.avi" showControls="0" showdisplay="0" showstatusbar="0" width="99" height="98" autostart="true"></embed>
</object>

Que podemos ver en acción en esta ventana.

2. Si el fichero es MPEG, lo tenemos bastante mal para incrustar un video de forma compatible. En Internet Explorer podemos usar la etiquetas IMG y OBJECT, pero mientras ésta última no nos mostrará nada en Netscape, podemos usar IMG con los atributos dynsrc y src para mostrar el video en Explorer y una imagen alternativa en Netscape.

3. En el caso de ficheros MOV, usaremos la etiqueta EMBED, que si tenemos instalado Quick Time Playes nos permitirá visualizar correctamente el video en todos los navegadores.

La etiqueta A

Si con ficheros MPEG tenemos problemas en los navegadores Netscape, eso no es nada cuando queremos ofrecer a nuestros visitantes un video clip realizado en otro cualquiera de los posibles formatos de video. Además, por mucho que quede bonito un video incrustado en una página, el control que sobre el mismo podemos ejercer en todos los casos bastante limitado.

Una buena solución a estos problemas pasa por dejar que el video lo visualice directamente la aplicación adecuada para ello, sin las limitaciones que le impone el navegador web. Esta forma de acceder al fichero de video podemos implementarla mediante la etiqueta estándar A, que crea un enlace al mismo.

Efectivamente, al enlazar directamente el fichero, el sistema operativo llamará a la aplicación adecuada, que se abrirá independientemente y permitirá visualizar el video con sus dimensiones y características propias, siempre y cuando el usuario tenga instalado en su máquina dicha aplicación. Si la aplicación de video ha instalado plugins para los navegadores, el fichero se abrirá incrustado en una ventana del navegador usado. Si el usuario no dispone ni de la aplicación ni del plugin, tendrá la opción de guardar el fichero en su disco duro, con lo que podrá instalar el programa necesario con tranquilidad y visualizarlo cuando desee.

La sintaxis para enlazar un fichero de video será del tipo:

<a href="ruta_fichero">Mensaje</a>

Ejemplo de fichero MOV:

<a href="ejemplos/mov_1.mov" target="_blank">pinchando aquí</a>

Que podemos ver en funcionamiento pinchando aquí.

Ejemplo de fichero AVI:

<a href="ejemplos/heart_1.avi" target="_blank">pinchandoaquí</a>

Que tenemos en acción pinchando aquí.

Ejemplo de fichero MPEG:

<a href="ejemplos/mov_1.mov" target="_blank">pinchando aquí</a>

Que podemos ver pinchando aquí.