Artículos
HTML

Cargar un vídeo AVI, ASF o WMV en mi página web

29/Ago/2007

Si tuviésemos que catalogar los formatos de vídeo propietarios de Microsoft podríamos hablar de los tres siguientes: AVI, ASF y WMA.

  • AVI «Audio Video Interleave» el primero de los formatos. Muy expandido en todas las plataformas Microsoft. Está siendo superado por las nuevas tecnologías.
  • ASF «Advanced Streaming Format» utilizado para web streaming.
  • WMV “Windows Media Video” que es el formato asociado para ser utilizado con el reproductor Windows Media Player de Microsoft. Este software está disponible en varias plataformas, incluido SUN Solaris y Macintosh.

La idea de este ejemplo es ver como poner uno de estos vídeos dentro de una página web.

El principal problema a la hora de manipular los vídeos dentro de las páginas web es la disparidad de formatos, de software necesario para visualizarlo y la poca estandarización en las etiquetas HTML.

Es por ello, que posiblemente, lo mejor sea poner un enlace sobre el vídeo para que cada usuario se lo descargue y lo visualice con el software de su plataforma cliente. Si utilizamos esta opción es recomendable que se indique el nombre de fichero, tamaño y tipo.

Por ejemplo:

Torre Eiffel (69kb fichero WMV)

El código para hacer esto es muy sencillo ya que tendremos que utilizar el elemento a.

<a href="TorreEiffel.wmv">Torre Eiffel (69kb fichero WMV)</a>

Si nos centramos en visualizar algún vídeo de los formatos AVI, ASF y WMV lo que tendremos que aprender es el cómo cargar el Windows Media Player y cómo este puede ser parametrizado.

Según la W3C el método correcto de visualización sería con la etiqueta <OBJECT>, aunque los navegadores siguen soportando la etiqueta <EMBED>.

Los atributos más importantes de la etiqueta object son data, donde se indicará el nombre del fichero de vídeo a ser cargado y type donde se indicará el mime-type del fichero. Opcionalmente podremos indicar el alto y ancho del vídeo mediante los atributos width y height.

Si hablamos de los mime-type de los ficheros de video de Microsoft podemos tomar como referencia la siguiente tabla:

MIME type Extensión
video/x-ms-asf asf,asx
video/x-ms-wm wm
video/x-ms-wmv wmv
video/x-ms-wvx wvx

El código nos quedará de la siguiente forma:

<object data="TorreEiffel.wmv" type="video/x-ms-wmv" width="320" height="240"></object>

Pero podemos ir algo más allá. Y es con el Window Media Player. En estos momentos representado como un objeto puede recibir parámetros para su configuración, los cuales podemos pasar a la etiqueta object mediante la etiqueta param.

Algunos de esos parámetros son:

  • src, nombre del fichero con el video.
  • autostart, el valor 1 hará que se empiece a reproducir nada más ser cargado. El valor 0 hará el efecto contrario.
  • volumen, número entero con el valor del volumen.
  • showControls, con el valor 0 no se mostrará los controles del video (play, stop, pause,…). El valor 1 hará que se vean estos controles
  • showDisplay, muestra información del fichero (valor 1). Por defecto deshabilitado (valor 0)
  • showStatusBar, muestra la barra de avance del video. Por defecto habilitado (valor 1).
  • playcount, número de veces que se repetirá el video.

El código nos quedaría finalmente de la siguiente guisa:

<object data="TorreEiffel.wmv" type="video/x-ms-wmv" width="320" height="240">
   <param name="src" value="TorreEiffel.wmv" />
   <param name="autostart" value="1" />
   <param name="volume" value="0" /> 
   <param name="showcontrols" value="0" />
   <param name="showdisplay" value="0" />
   <param name="showstatusbar" value="0" />
   <param name="playcount" value="9999" />
</object>

El soporte de este objeto está disponible en Internet Explorer, FireFox, Opera,… Si te encuentras problemas con el FireFox (o algún otro de la familia Mozilla) te recomendaría que te leyeses este artículo (lamentablemente solo en ingles) http://forums.mozillazine.org/viewtopic.php?t=206213 sobre cómo validar si está bien instalado tu plug-in del FireFox.

Código Fuente

Descárgate el código fuente de Cargar un vídeo AVI, ASF o WMV en mi página web
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre HTML

Disfruta también de nuestros artículos sobre HTML en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML

¿Te atreves a probar tus habilidades y conocimiento en HTML con nuestro test?

Test HTML
Suscribir
Notificar de
guest
26 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios