JMiur [E]

Mostrar archivos multimedia no es demasiado complicado de implementar, estamos acostumbrados a colocar videos de servicios como YouTube o audio a través de GoEar. De tanto en tanto, nos atrevemos con un SWF pero ¿eso es todo? ¿qué puede hacerse cuando se trata de formatos más "exóticos"?

Para empezar, hay que decir que no existe un método que funcione para todos los visitantes ya que depende mucho de los servidores donde se alojan las páginas y de la configuración del navegador que utilizamos. Como siempre, Internet Explorer es el patito feo y es con el que deberemos lidiar.

Los que saben dicen que la mejor forma es poner un simple enlace pero claro, no creo que esto conforme a nadie:
<a href="URL_archivo.MP3">Canción</a>
<a href="URL_archivo.AVI">Video</a>
En estos casos, lo que pasará dependerá del usuario que haga click. Puede aparecer una ventana preguntando si se quiere descargar el archivo o se abrirse el reproductor multimedia en el navegador o como programa externo ¿Y cómo sabe la PC qué es lo que debe hacerse? Se basa en el llamado MIME type (Multipurpose Internet Mail Extensions) que son una serie de especificaciones que nos permiten intercambiar todo tipo de archivos a través de internet (texto, audio, vídeo, etc.). Por ejemplo:

image/jpeg para imágenes en formato JPG (JPEG-format image)
audio/mpeg para audio en formato MP3 (MPEG Audio File)
video/avi para videos en formato AVI
image/gif para imágenes en formato GIF

Este tipo puede ser incluido en los enlaces, no es que sirva de mucho pero, en ciertos casos, puede ayudar al navegador a determinar qué hacer:
<a href="URL_archivo" type="audio/mpeg">Canción</a>
Claro que, todo esto es poco, normalmente, pretendemos incrustar el archivo multimedia en la misma página. Para hacer esto, muchos servicios nos proveen un código que copiamos y pegamos. No es una mala solución pero muchas veces no funciona y sobre todo, no nos deja entender qué estamos haciendo de tal manera que, si alguna vez nos encontramos frente a una alternativa, a un formato poco común, no sabemos cómo resolverlo ni dónde buscar la respuesta.

La etiqueta genérica para insertar multimedia es <OBJECT> </OBJECT> y es válida tanto para Internet Explorer (con problemas) como para Firefox. La sintaxis genérica es la siguiente:
<object data="URL_archivo" width="ancho" height="alto" type="MIME type">
<param name="nombre" value="valor" />
</object>
Todos esos atributos son obligatorios y cada etiqueta debe abrirse y cerrarse (PARAM termina con una barra inclinada)

¿Por qué debe repetirse el dato? Porque Internet Explorer, a diferencia del resto de los navegadores, lee ese dato desde la etiqueta PARAM y, para complicarnos la vida, el parámetro depende del tipo de archivo así que puede ser::
<param name="FileName" value="URL_archivo"/>
<param name="movie" value="URL_archivo" />
<param name="src" value="URL_archivo"/>
<param name="Source" value="URL_archivo"/>
<param name="URL" value="URL_archivo"/>
En un SWF, utilizamos movie, con los demás deberemos averiguarlo o probar pero, como los ActiveX o plugins sólo leen los parámetros que conocen e ignoran el resto, podemos usarlos todos juntos .

Otros atributos especiales que puede usarse son:

classid="identificador" establece la URL del objeto o componente externo necesario para reproducir el archivo y el control ActiveX necesario.
autostart="true|false" determina si debe empezar a reproducirse por sí sólo al cargarse la página o no
standby="mensaje" presenta en pantalla un mensaje mientras se carga

¿Es necesario poner CLASSID? No, a menos que queramos utilizar una aplicación específica; si queremos que el navegador utilice cualquier reproductor disponible, no colocamos el atributo. Esto es importante ya que, por ejemplo, si escribimos:
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
<param name="src" value="URL_archivo.mpg">
</object>
Sólo funcionará en Windows utilizando Internet Explorer y QuickTime instalado; los demás ignorarán el ActiveX y buscarán cómo reproducirlo, en Linux o Mac, por ejemplo, directamente no se verá.

Lo más importante es establecer el tipo MIME correcto aunque algunos navegadores son capaces de reconocerlos automáticamente y en ese caso, no se coloca.

para un archivo de audio MP3 debe usarse type="audio/mpeg"
para un archivo de audio WAV debe usarse type="audio/wav"
para un archivo de audio MIDI debe usarse type="audio/midi"
para un archivo de FLASH debe usarse type="application/x-shockwave-flash"
para un video AVI debe usarse type="video/avi"

Para diferentes formatos de las imágenes:

type="image/gif"
type="image/jpeg"
type="image/tiff"
type="image/x-png"
type="image/bmp"
type="image/x-emf"
type="image/x-wmf"

Estos son los más comunes pero hay otros:

para una lista de reproducción M3U usamos type="audio/x-mpegurl"
para un video de Real Player RAM usamos type="audio/x-pn-realaudio"
para un video de QuickTime QLT o MOV usamos type="application/x-quicktimeplayer"
para un video ASX usamos type="video/x-ms-asf"
para un audio en formato AIFF usamos type="audio/x-aiff"

Si el atributo type hace referencia a un tipo de archivo desconocido, los resultados serán diferentes según sea el navegador, por ejemplo, Firefox informará que se requiere un plugin.

Pero no estamos limitados a multimedia, también podemos incrustar otro tipo de elementos como páginas web o archivos de texto aunque en Internet Explorer tiene serios problemas para reconocerlos:

type="text/plain"
type="text/richtext"
type="text/html"
type="application/pdf"

Vamos a los ejemplos:

type="text/plain" para mostrar un archivo de texto (no funciona en Internet Explorer)
<object data="URL_archivo.txt" type="text/plain" width="500" height="150">
<p>Código fuente de <a href="URL_archivo.TXT">Archivo TXT</a></p>
</object>
type="text/html" para mostrar una página web (no funciona en Internet Explorer)

Ver/Ocultar Demo

Código fuente de Archivo HTML



<object data="URL_archivo.html" type="text/html" width="500" height="150">
<p>Código fuente de <a href="URL_archivo.HTML">Archivo HTML</a></p>
</object>

type="video/x-ms-asf" para mostrar videos ASX

type="application/x-quicktimeplayer" para mostrar videos de QuickTime (requiere tener un plugin instalado)

Ver/Ocultar Demo

<object data="URL_archivo.MOV" type="application/x-quicktimeplayer" width="165" height="140"> <param name="src" value="URL_archivo.MOV" /> </object>
type="audio/x-pn-realaudio" para mostrar archivos de RealPlayer (requiere tener un plugin instalado)
Ver/Ocultar Demo
<object data="URL_archivo.RAM" type="application/x-quicktimeplayer" width="150" height="105"> <param name="src" value="URL_archivo.RAM" /> </object>
type="audio/x-midi" para mostrar audio en formato MIDI (requiere tener un plugin instalado)
Ver/Ocultar Demo
<object data="URL_archivo.MID" type="audio/x-midi" width="200" height="16"> <param name="FileName" value="URL_archivo.MID" /> <param name="src" value="URL_archivo.MID" /> </object>
¿Esto responderá a todas las consultas? No, de ninguna manera. Cuando hablamos de archivos multimedia las variantes son tantas que nadie podrá resolverlo en el 100% de los casos, siempre habrá un grupo de visitante que no podrán acceder a estos. Desde codecs.com pueden descargarse versiones de la mayoría de los plugins, tanto sus versiones originales como las alternativas que, en general, son más livianas:

18 comentarios:

Cometi  

Muy,muy buen post. felicitaciones
Un saludo desde www.cominga.com

Responder
mefistum  

Muchas gracias, muy útil la información

Responder
www.loteriasyquinielas.es  

muchas gracias por estos códigos.

Responder
El_de_la_bici  

muchas gracias por la entrada. me ha sido muy útil

Responder
MaCaPe  

Hola JMiur, gracias por permitirnos compartir tus inquietudes y descubrimientos, por aprender contigo,... y aprenderte a "ti", altruista, tolerante, paciente, saber estar,...un gran maestro,...Disculpas por no agracértelo a menudo, pero siempre a contrareloj,...Estoy intentando añadir a "object" el "param" autoplay="false". El sonido está en swf, para que funcione con todos los navegadores,...En laúltima entrada de - econenos "Vento Lois. Letras Galegas 2011. Entrevías", me interesaba que comenzase al abrir la página, pero no es lo que pretendo para otros pequeños proyectos,...¿Es posible?, no soy capaz de parar hasta dar con la solución. Un cordial saludo

Responder
JMiur  

@MaCaPe Por defecto, todos archivos SWF se ejecutan apenas se cargan.

El parámetro autoplay es un opcional que sólo funcionará si el SWF ha sido creado para permitir esa opción; si no es así, simplemente es ignorado. Los archivos de ese tipo son independientes así que no hay manera de controlarlos a menos que, como decía antes, quien los crea, agregue esas opciones.

Es probable que sea por ese motivo que no consigues controlar esa parte.

Responder
MaCaPe  

Gracias por la prontitud. El programa que utilicé para crear el swf no me dá esa opción que mencionas o al menos yo no la veo. ¿Conoces alguno? Bueno,no es muy importante lo que pretendo hacer,.. ¡Una galería parlante! Es decir convertir las fotos en reproductores de sonido. Yo le echo imaginación y dentro de mi ignorancia todo es posible. Los programas que utilizo para generar actividades ya añaden sonidos (Edilim, Ardora,..). Un saludo

Responder
JMiur  

La verdad es que desconozco qué tip ode soft puede hacer eso aparte del mismo Flash.

Responder
CristJian  

Hola JMiur. Una pregunta, ¿se le puede asignar estilos css a esa etiqueta?

por ejemplo estoy subiendo muchos videos en un blog, y quisiera que todos fueran del mismo tamaño sin necesidad de cambiarlos de uno a uno.

Gracias :)

JMiur  

Sí; el ancho y el alto pueden establecerse con CSS como con la mayotía de las etiquetas.

CristJian  

Los videos los estoy subiendo por el cargador de videos de blogger, y veo que tiene un class="BLOG_video_class" pero no se como editar eso en la plantilla para que todos los videos que suba tengan el mismo ancho y alto.

JMiur  

Jamás uso ese sistema porque luego no sé donde se guardan esos videos pero, si la etiqueta OBJECT tiene la clase BLOG_video_class, la reglas sería:

.BLOG_video_class {height:valorpx; width:valorpx;}

CristJian  

Exactamente ya había intentado eso, pero no cambió en nada el tamaño de los videos, en cambio cuando le puse {display: none;} para probar si se modificaban los videos si funcionó, ya no se mostraban en las entradas, pero no se por que no funcionó con los atributos de height y width :(

JMiur  

Muéstrame un ejemplo cualquiera.

CristJian  

Un ejemplo de video de una entrada:

object class="BLOG_video_class" contentid="83ebbfec70a99330" height="385" id="BLOG_video-83ebbfec70a99330" width="480"></object

JMiur  

Eso es código que se ve en el editor de Blogger pero no es el código real que muestra el navegador; ese código real es una cosa gigantesca que no escribo acá porque sería una locura. Si miras el código fuente de la página donde lo insertas, lo verás.

El problema es que ese código real es "antiguo" porque utiliza OBJECT para ciertos navegadores y EMBED para otros, cosa que es ridícula hace años.

De todos modos, se soluciona fácil; por ejemplo así se verían de 200x200:

.BLOG_video_class, .BLOG_video_class embed {
width: 200px;
height: 200px;
}

y si lo quieres ver centrado:

.BLOG_video_class, .BLOG_video_class embed {
width: 200px;
height: 200px;
margin: 0 auto;
display: block;
}

CristJian  

Gracias hermano :D
ahí si se solucionó el problema, eres lo maximo brother jaja por que sino me tocaba editar video por video y son como mas de 200! jejeje

me has salvado ;)

un abrazo

JMiur  

Perfecto. Me alegra que funcionara :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR