Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de HTML

HTML: lenguaje básico para crear páginas web

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

RSS. Suscribir canal.

10. Video y sonido (I)

10.1 Enlaces multimedia

Multimedia en navegadores.

Los navegadores no están diseñados en principio para reproducir archivos de audio y video, sin embargo normalmente pueden reproducir los tipos de archivo más habituales, gracias a unos programas o aplicaciones que tienen incrustados los navegadores, llamados "plugins". algunos de estos plugins se instalan junto con el navegador, otros podemos instalarlos o actualizarlos más adelante.

No todos los navegadores tienen los mismos plugins, y además estos pueden estar activados o desactivados. Con lo que cada usuario tendrá configurado el navegador de forma distinta. Por tanto, al poner un archivo de sonido o de video en una web, es muy posible que éste no se vea igual en todos los navegadores, incluso que en algunos no se vea.

Formatos de archivo de Audio y video.

Principales formatos de audio

• .wav : Formato típico de la casa windows, de elevada calidad. su principal inconveniente es la gran cantidad de espacio que ocupa, con lo que suele utilizarse para reproducir ruidos o frases cortas.
• .au : (Audio File format): formato creado por la casa Apple para plataformas MAC.
• .mid : formato MIDI. Son sonidos creados por ordenador, por lo que no pueden ser grabaciones de sonidos reales como música grabada o voces. Su principal ventaja es su pequeño tamaño, por lo que es muy usado en la web.
• .mp3 (MPEG 1 Layer 3) : Es sin duda el más usado para sonidos grabados de duración media o larga. (canciones, mas de una frase, etc.) ya que permite una buena calidad y un tamaño hasta 10 veces inferior al del fichero .wav.
• .rmp ; Real Audio : También puede tener extensión .ra. De calidad media, hace falta tener instalado el plugin Real Audio.

Sin duda los más usados son .wav, .mid y .mp3.

Principales formatos de vídeo

• .avi : el formato AVI (Audio Video Interleave) tiene un funcionamiento muy simple, pues almacena la información por capas, guardando una de vídeo seguida por una de audio. Tiene una alta compresión. Puede ser reproducido por DirectShow y Windows Media.
• .wmv : Microsoft Windows Media Vídeo: de la casa Microsoft, funciona con el Windows Media Player. También con extensión .asf.
• .mov : Apple QuickTime: requieren de un reproductor especial que es el "Quicktime Player" para visualizarlos. Este reproductor, tiene una versión sencilla gratuita y una profesional.
• .mp4 .mpg .mpeg : El formato MPEG (Moving Picture Experts Group) es un standard para compresión de video y de audio.
• .divx : Basado en el formato MPEG, el formato divx tiene un alto grado de compresión con una alta calidad.

Etiqueta de enlace

La etiqueta de enlace <a href="...">...</a> es una de las más polivalentes, ya que puede servirnos para insertar audio o video en nuestra página, basta con poner en el atributo href la ruta del archivo de audio, video, o cualquier otro, que queramos mostrar, con su extensión. El comportamiento de esta etiqueta ante cualquier tipo de archivo es el siguiente:

• En primer lugar, el navegador intentará abrir el archivo. En principio, sustituyendo a la ventana que estamos viendo, o tal como le habremos especificado en el atributo target.
• Si el navegador tiene instalados los plugins que permiten ver el archivo, este se abrirá.
• Si no tiene instalados los plugins, nos mostrará una ventana que nos indicará qué es lo que queremos hacer con el archivo: abrirlo o descargarlo.
• Si decidimos abrirlo pueden ocurrir dos cosas, que tengamos ya un programa predeterminado para ese tipo de archivos, con lo cual el archivo se abrirá en ese programa; o que no lo tengamos, con lo cual se abrirá un nuevo cuadro, en el cual podemos buscar el programa con el que queremos abrir el archivo.
• Si decidimos descargarlo, se abrirá un nuevo cuadro en el cual buscaremos el directorio para guardarlo. por supuesto en cualquier momento también podemos optar por cancelar la descarga o la apertura mediante el botón "cancelar".

La etiqueta <a href=".."></a> de enlace permite incluir archivos para descargar. Los archivos comprimidos de WinZip o WinRar se direccionan mediante esta etiqueta para que los descargue el usuario. También los archivos para descargar programas (extensión .exe) utilizan esta etiqueta. Al aparecer el cuadro de diálogo de descarga, la página que estamos viendo no cambia, lo que sí ocurre cuando el navegador puede abrir el archivo.

Abrir el archivo en la propia página.

Como ya se ha dicho, el archivo, por defecto, se abre en una página aparte, esto lo podemos modificar para que se abra en la propia página mediante un pequeño truco;

• En primer lugar, creamos una ventana mediante la etiqueta iframe. Como se ha explicado en la página "9.4 Etiqueta iframe", esta etiqueta abre una ventana hacia otra página.
• Debemos crear la página a la cual enlaza la etiqueta iframe. Esta página estará en blanco, o como mucho le pondremos un color de fondo para distinguir la ventana del resto en la página principal.
• A la etiqueta iframe debemos darle un nombre mediante el atributo name="nombre". También debemos asegurarnos que el ancho y el alto de la ventana (atributos width y height) son lo bastante grandes como para que quepa el contenido que queremos mostrar. (en el caso de sonidos, debe caber la consola de control de sonidos).
• Por último colocamos el enlace, cuya URL es el archivo de sonido o video, y lo redirigimos mediante la etiqueta target="nombre" hacia la ventana del iframe.

Mediante este sencillo truco podemos insertar en la misma página varios archivos de audio y video, y abrirlos mediante los enlaces. he aquí un ejemplo:

Insertamos una etiqueta iframe en la página:

<iframe src="#" width="300" height="225" name="video"></iframe>

Después mediante unos enlaces a la etiqueta iframe damos la opción de ver o no ver el video:

<a href="objetos/misojos.swf" target="video">Ver video</a>

<a href="objetos/pantallablanco.html" target="video">Ver video</a>

Ver video

Parar reproducción

Fíjate que aparte de insertar el archivo de video en la carpeta de "objetos" hemos insertado también una página en la que ponemos el texto por defecto que se ve cuando no está el video.

Esta forma de insertar video es muy precaria, ya que no todos los formatos de video son admitidos por el navegador. Aquí hemos usado el formato .swf que es el usado para hacer animaciones con flash. (el plugin de flash suelen tenerlo casi todos los navegadores).

Otros formatos de video como .avi o .wmv es probable que no sean admitidos por esta etiqueta, con lo que si los insertamos es probable que al abrir el enlace nos salga el cuadro de diálogo para descarga.

---

En la siguiente página veremos otras etiquetas con la que se puede insertar video o sonido en una página web.

Etiquetas multimedia.

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com