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

29/ago/2007 HTML 26 Comentarios
html

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.

  1. <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:

  1. <OBJECT data="TorreEiffel.wmv" type="video/x-ms-wmv"
  2. 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:

  1. <OBJECT data="TorreEiffel.wmv" type="video/x-ms-wmv"
  2. width="320" height="240">
  3.  
  4. <param name="src" value="TorreEiffel.wmv">
  5. <param name="autostart" value="1">
  6. <param name="volume" value="0">
  7. <param name="showcontrols" value="0">
  8. <param name="showdisplay" value="0">
  9. <param name="showstatusbar" value="0">
  10. <param name="playcount" value="9999">
  11.  
  12. </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.

Vídeos sobre HTML

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

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

Víctor Cuervo

Alex

El problema de estos códigos, es que no hay forma de detener el primer video al cargar otro, y al cambiar de página en ie9 se queda pegado el reproductor. Alguien encontró alguna solución que no sea usar html5, ya que muchas empresas aún no actualizan navegador y tienen ie8 o ie9?

Víctor Cuervo

Mauricio

Un gran recurso para desarrollar/aplicar funcionalidades en un navegador como Internet Explorer.
Gracias por compartir sus conocimientos.

Víctor Cuervo

Diseño web

Gracias por el aporte, tiene su tiempo pero sigue siendo muy útil.

Víctor Cuervo

Víctor Cuervo

@andres-lo,
Me alegra mucho saber que te ha servido. 😀

Víctor Cuervo

andres-lo

gracias..
exelente aporte… es dificil encontrarlo

Víctor Cuervo

INGRID MURIA

Hola,como mezclo la voz de fondo con las informaciones escrita…

Víctor Cuervo

lineadecodigo

@Creaciones1991,

Me alegro que te haya servido. 😀

Víctor Cuervo

lineadecodigo

@I. E. Fransico López de Romaña,

Correcto, solo tienes que cambiar el formato.

Víctor Cuervo

Creaciones1991

Gracias Por la Información…Esta Chido el Código…. Éxito

Víctor Cuervo

lo

lo!

Víctor Cuervo

I. E. Fransico López de Romaña

con esos codigos podria reproducir cualquier tipo de video compatible? solo abria que cambiar el formato no? *.avi, *. wma

Víctor Cuervo

Blekos

NOSE PORQ NO SE PEGÓ TODO EL CÓDIGO, PERO ESA ES LA IDEA:

Click <>HERE<> to SHOW

ID:
<>

<>

VIDEO=

d.innerHTML='<

>’);

Víctor Cuervo

Blekos

HOLA, TENGO ESTE CODIGO:

function selectCode(f){
document.forms[f].elements[0].focus();
document.forms[f].elements[0].select();
}

isIE=document.all;
isNN=!document.all&&document.getElementById;
isN4=document.layers;
isHot=false;

function ddInit(e){
topDog=isIE ? “BODY” : “HTML”;
whichDog=isIE ? document.all.theLayer : document.getElementById(“theLayer”);
hotDog=isIE ? event.srcElement : e.target;
while (hotDog.id!=”titleBar”&&hotDog.tagName!=topDog){
hotDog=isIE ? hotDog.parentElement : hotDog.parentNode;
}
if (hotDog.id==”titleBar”){
offsetx=isIE ? event.clientX : e.clientX;
offsety=isIE ? event.clientY : e.clientY;
nowX=parseInt(whichDog.style.left);
nowY=parseInt(whichDog.style.top);
ddEnabled=true;
document.onmousemove=dd;
}
}

function dd(e){
if (!ddEnabled) return;
whichDog.style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx;
whichDog.style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
return false;
}

function ddN4(whatDog){
if (!isN4) return;
N4=eval(whatDog);
N4.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
N4.onmousedown=function(e){
N4.captureEvents(Event.MOUSEMOVE);
N4x=e.x;
N4y=e.y;
}
N4.onmousemove=function(e){
if (isHot){
N4.moveBy(e.x-N4x,e.y-N4y);
return false;
}
}
N4.onmouseup=function(){
N4.releaseEvents(Event.MOUSEMOVE);
}
}

function hideMe(){
if (isIE||isNN) whichDog.style.visibility=”hidden”;
else if (isN4) document.theLayer.visibility=”hide”;
}

function showMe(imagename){
var d = document.getElementById(“tdim”);
d.innerHTML=’

‘);
if (isIE||isNN) whichDog.style.visibility=”visible”;
else if (isN4) document.theLayer.visibility=”show”;
}
document.onmousedown=ddInit;
document.onmouseup=Function(“ddEnabled=false”);

Y ASI LO LLAMO:

Click HERE to SHOW.

ESTE ES EL ID DEL LAYER DONDE SE ENCUENTRA EL VIDEO:

ME FUNCIONA CON UNA IMAGEN, PERO NO CON VIDEO. COMO PUEDO VISUALIZAR EL VIDEO DENTRO DE UN LAYER?

Víctor Cuervo

Jose

Hola, me gusta tu manual, pero dime que sucede si deseo hacer que le video que esta EMBED cargue la pagina y automaticamente cargue en fullscreen. gracias

Víctor Cuervo

hilary

como puedo poner una musica de fondo a mi pagina web
es muy urgente

graaciaasss

Víctor Cuervo

edu

Por favor :
Soy nuevo en esto de bajar paliculas del ARES, la primera que he bajado el otro dia es (Infiltrados). cual es mi sorpresa que cuando la quiero pasar a DVD para poder la ver, me de error.
¿Es problema de la descarga o de mi ordenador?. O para pasarlas a DVD tienen que tener algun codigo expecial.
Me podis secar de este enrredo para mi; ya que para vosotros es pan comido.
Perdonar or las molestias

Víctor Cuervo

Cuauhtémoc

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

Víctor Cuervo

isabel

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

Víctor Cuervo

Kibo83

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

Víctor Cuervo

Edgardo

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

Víctor Cuervo

Karina Rossi

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 :)

Víctor Cuervo

luis secada

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

Víctor Cuervo

EDDYS

MUSICA DE FONDO

Víctor Cuervo

andres

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.

Víctor Cuervo

lineadecodigo

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>

Víctor Cuervo

Juan

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?

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*


*