feed twitter facebook LinkedIn facebook

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

agosto 29, 2007 por Víctor Cuervo 25 Comentarios Imprimir Imprimir

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 la etiqueta 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 como 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.

Visualizar el ejemplo | Descargar el código

tags: , , , , , , , , , , , , , , , , , , , ,

Artículos relacionados:

25 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

1 2 3
  1. Juan
    septiembre 1, 2007 #

    Veamos si lo entiendo, porque soy un poco burro.
    Me he vajado una pelicula por e Mule. El titulo es “El club de los suicidas”
    El codigo a poner es
    Y entiendo que con esto podre visionar la pelicula?

  2. lineadecodigo
    septiembre 3, 2007 #

    Si, para que la gente se lo pueda bajar desde una página (no visualizarlo en ella). Si bien, tienes que tener cuidado con la URL que pones. En este caso pones “Elclubdelossuicidas.wmv”.

    Esto implica que tendras que poner el video en el mismo sitio donde tengas la página con el enlace.

    Lo mejor es utilizar URLs absolutas. Esto quiere decir que tendrás que poner una URL con protocolo+nombre_servidor+nombre_video.

    Por ejemplo, si nuestro servidor fuese el de Yahoo!. La URL podría quedar de la siguiente manera:

    http://lineadecodigo.yahoo.com/Elclubdelossuicidas.wmv

    Y por lo tanto, el código sería:

    <A href=”http://lineadecodigo.yahoo.com/Elclubdelossuicidas.wmv”>Con esto puedes descargarte mi pelicula</A>

  3. andres
    septiembre 12, 2007 #

    y si un archivo no esta (como por ejemplo el streaming de uan radio que no este transmitiendo) como hace para pasar a otro archivo (en mi caso a otra radio). como decir q si no esta transmitiendo cargue directamente otra.

  4. EDDYS
    octubre 18, 2007 #

    MUSICA DE FONDO

  5. luis secada
    octubre 28, 2007 #

    tengo problemas para reproducir mi radio windows .pues me sale ese codigo video/x-ms-asf object. y es que tengo el programa ares y me muestra un archivo de abrir la radio a travez de el , ,,pero no va. . va a travez de windows media… gracias

  6. Karina Rossi
    noviembre 25, 2007 #

    Hola :)
    tengo problemas con poner un video de avril lavigne a mi espacio de window live. Para poner el video dice que tiene que tener por lo menos una etiqueta “EMBED”. El video q quiero cargar en mi blog es :
    http://www.youtube.com/watch?v=LIOUkw9UFz4
    pero no puedoo :(
    espero q me ayudes….gracias :)

  7. Edgardo
    diciembre 5, 2007 #

    Tengo una pregunta, como es el codigo para que me aparezca el reproductor de windows media player en una pagina web, pero para que me reproduzca una radio en linea. Gracias de antemano

  8. Kibo83
    diciembre 15, 2007 #

    Estaba buscando con reproducir flv en web, pero me marca error cuando no se tiene cnexxion a internet, creo que los convertirea wmv o mpg y me inclinare por la opcion que das ya la cheque funciona perfecto muchas gracias

  9. isabel
    abril 8, 2008 #

    hola mi computadora se despprogramo y no puedo bajar mas musica al mp3 me pide un codigo quisiera saber donde lo encuentro gracias.

  10. Cuauhtémoc
    abril 14, 2008 #

    Buen código, me ayudó bastante, justo lo que buscaba

1 2 3

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*