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 y el lenguaje HTML en principio no estaban diseñados para reproducir archivos de audio y video, sin embargo estas son unas funciones dada vez más demandadas y habituales en las páginas web.

Para adaptarse y poder reproducir los tipos de archivo más habituales, en principio los navegadores necesitaban ampliar sus funciones mediante unos programas o aplicaciones llamados "plugins". Antiguamente había que instalarlos aparte, pero hoy en día la gran mayoría de los navegadores en sus versiones actualizadas los incluyen directamente.

Sin embargo no todos los navegadores tienen los mismos plugins, y además estos pueden ser activados o desactivados por el usuario. Cada usuario, por lo tanto, puede tener configurado el navegador de forma distinta. Por tanto, es posible que algunos archivos de video y sonido, sobre todo dependiendo del formato, no se vean de la misma forma en todos los navegadores, incluso que algunos tipos de archivo, no sean admitidos.

En todo caso la mayoría de los navegadores, y el nuevo lenguaje HTML5 están haciendo un gran esfuerzo por uniformizar la forma de presentar, por lo menos, los principales formatos de audio y de video.

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.
• .ogv : De sofware libre y creado más recientemente, tiene una buena relacion calidad/compresión. Este formato es promocionado por las nuevas tendencias en la web, como el HTML5, los nuevos navegadores o el diseño de páginas para móviles.

Sin duda los más usados en la web 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.
• .ogg : De sofware libre y creado más recientemente, tiene una buena relacion calidad/compresión. Se corresponde con el formato .ogv de video. Las nuevas tendencias como el HTML5, los nuevos navegadores o el diseño de páginas para móviles lo incluyen.

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, cosa 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