Monthly Archives: septiembre 2007

Insertar video de Windows Media en HTML

Hoy me sorprendí al ver que las estadísticas de mi sitio muestran un promedio de 10 visitas diarias siendo que desde el mes de Abril (hace unos 6 meses) no escribo ningun Post. Es por eso, que hago un esfuercito y aquí voy a publicar algunas cosas utiles para quienes buscan referencia de programación. Y dada la alegria que me causa saber que estoy teniendo publico, mi ego dice que tengo que hacer esfuerzo y actualizarlo más seguido para mantener e incrementar esas visitas.

El tip de este post es un simple script para insertar una pelicula (video) en formato WMV (Windows Media Video) en un archivo HTML. Este script genera un reproductor de windows media en la página en donde tendremos los controles de reproducción necesarios para ver el video.

El codigo es el siguiente:
<script language=”JavaScript”>
<!–
if (detectWindowsMedia()==false) {window.location.href= “http://www.microsoft.com/windows/windowsmedia/player/9series/default.aspx”}; //ver si va a error o lo manda a Ubbi a bajarse el winmedia
//–>

</script>
<object id=”MediaPlayer” width=”426″ height=”320″ classid=”CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95″ codebase=”http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715″ standby=”Cargando componentes Microsoft Windows Media Player…” type=”application/x-oleobject” viewastext>

<param name=”FileName” value=”VIDEO“>
<param name=”AnimationatStart” value=”false”>
<param name=”TransparentatStart” value=”false”>
<param name=”AutoStart” value=”true”>
<param name=”ShowControls” value=”true”>
<param name=”Autosize” value=”true”>
<param name=”ShowStatusBar” value=”true”>
<embed type=”application/x-mplayer2″
pluginspage=”http://www.microsoft.com/isapi/redir.dll?prd=windows&
sbp=mediaplayer&ar=Media&sba=Plugin&”
src=”VIDEO
showcontrols=1
autostart=1
autosize=1
showstatusbar=1
width=”426″
height=”320″>
</embed>
</object>

He aquí la explicación para entender esto:

1- COMPROBACION DE EXISTENCIA DE WINDOWS MEDIA: Entre los tags <script /> que estan al principio, una función de JavaScript detecta si existe el reproductor de Windows Media en el equipo a ejecutarse, caso de que no lo tenga nos llevara a la página de descarga del reproductor. Aquí tambien podría lanzarse un alerta diciendo que no esta el reproductor o bien tomar alguna acción propia para avisar que no esta el mismo.

2- OBJECT y EMBED: Son las dos etiquetas encargadas de mostrar el reproductor y activar el ActiveX necesario para ejecutar el video. Si analizan un poco, la etiqueta OBJECT va acompañada de otras etiquetas llamadas PARAM que indicaran las propiedades del reproductor, como ser:
Filename: Nombre del archivo a abrir, con su ruta respectiva, relativa al documento.
AnimationatStart: Si tiene animación al inicio.
TransparentatStart: Si es transparente hasta que se inicie la reproducción.
Autostart: Si el video se pone en play automaticamente.
ShowControls: Quizas la más importante en conjunto con FileName, indica si se muestran los controles de reproducción.
ShowStatusbar: Muestra el estado de la descarga del contenido multimedia a reproducir.

De la misma manera, la etiqueta EMBED asigna estos parametros como propiedades en la etiqueta, no como etiquetas adicionales, pero la funcionalidad es la misma.
Ambas etiquetas deben estar para que sea reconocido por todos los navegadores (IE, FireFox, Opera, etc.)

Y por si no se dieron cuenta, les marque con VIDEO el lugar donde debe indicarse la ruta al video o sonido a cargar.

Espero que les sea útil y próximamente mostrare como publicar otros contenidos.