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 (II)

10.2 Etiquetas multimedia.

Mediante una serie de etiquetas podemos introducir sonido y video en nuestras páginas. Estas etiquetas llevan una serie de atributos para indicar el archivo y las características que queremos incorporar.

Etiqueta bgsound

La etiqueta bgsound sirve para insertar sonido de fondo en las páginas web. Su principal inconveniente es que sólo funciona con Internet Explorer, por lo que su uso es muy limitado. De todas maneras vamos a ver cuál es su forma y sus principales atributos:

<bgsound src="ruta_fichero" loop="numero" balance="b" volume="v"></bgsound>

Los valores de los atributos son los siguientes:

• src="ruta_fichero" : Indica la ruta donde está el archivo de sonido.
• loop="numero" : indica el número de veces que debe repetirse el fichero. si en lugar de un número escribimos el valor "infinite" el fichero se reproducirá indefinidamente.
• balance="b" : indica el balance del sonido entre los dos altavoces, es decir, la potencia con que se oirá en cada uno de ellos (derecho e izquierdo). Sus valores pueden estar entre -10,000 y +10,000; siendo el valor 0 un balance equilibrado entre los dos altavoces.
• volume="v" : indica el volumen al que se oirá el sonido, sus valores pueden variar entre -10,000 (mínimo) y 0 (máximo).

Como ya se ha dicho esta etiqueta suele ser muy poco usada ya que tiene las limitaciones de que sólo funciona con Internet Explorer, y además el usuario no puede controlar el sonido desde la página.

Etiqueta img

La etiqueta <img .../> que se usa normalmente para insertar imágenes también puede servir para insertar videos, sin embargo tiene sus limitaciones ya que sólo funciona con Internet Explorer y no con todos los tipos de archivo. De hecho sólo funciona con videos con extensión .avi, .mov, y .mpg. los atributos específicos para utilizar esta etiqueta para video son los siguientes:

• dynsrc="ruta_fichero" : Es el atributo usado para localizar el archivo de video que se quiere visualizar.
• loop="n" : Toma como valor un número entero que indica el número de veces que se reproducirá el video. Si ponemos un valor =-1 el video se reproducirá infinitas veces.
• start="fileopen/mouseover" : el valor fileopen es el valor por defecto e indica que el video empieza a reproducirse al acabar de cargarse la página. El valor mouseover indica que el video no empezará a reproducirse hasta que el usuario ponga el puntero del ratón encima de él.

Por lo demás se usan los mismos atributos de la etiqueta img es decir, height y with para el alto y el ancho de la consola, hspace y vspace para los márgenes de la consola. y también podemos usar la etiqueta src="ruta_imagen" para mostrar una imagen en el caso de que el navegador no pueda cargar el video.

Como ya se ha dicho el principal inconveniente de esta etiqueta es que sólo funciona el video en Internet Explorer, por lo que no es muy utilizada para este fin.

Etiqueta embed

La etiqueta embed sirve tanto para incrustar archivos de audio como de video en la página web. Esta etiqueta posee varios atributos, que pueden ser distintos en función del objeto que vayamos a mostrar en la pagina. su sintaxis general sería la siguiente.

<embed src="..." ...(atributos) ...></embed>

la etiqueta de cierre final es conveniente ponerla para que funcione correctamente, también podemos poner una barra inclinada al final de la etiqueta principal que sustituye a la etiqueta de cierre (<embed ... />), en todo caso nunca debemos dejar la etiqueta sin cerrar. A continuación vamos a ver cuales son los principales atributos de esta etiqueta y sus valores.

atributos referentes a vídeo y sonido

src="ruta_fichero"

Indica la ruta para acceder al archivo multimedia que queremos abrir.

loop="numero/true/false"

Define el número de veces que se reproducirá el fichero, como valor podemos poner un numero entero, o las palabras true (infinitas veces) o false (sólo una vez). Este atributo no funciona con todos los navegadores, especialmente con Internet Explorer en versiones antiguas. por lo que debemos complementarlo con el siguiente.

playcount="n"

Define el número de veces que se reproducirá el fichero en Internet Explorer.

autostart="true/false"

Define si el fichero debe empezar a reproducirse por si solo a la vez que la página (valor true), o debe necesitar la intervencion del usuario mediante la consola o código javascript para reproducirse (valor false).Tanto este atributo como los dos anteriores no funcionan con los archivos flash de video (extensión .swf), los cuales se muestran siempre al cargar la página y en número infinito de veces.

type="tipo_fichero"

Atributo importante que declara qué tipo de fichero estamos usando. El navegador buscará el plugin o programa necesario para abrirlo, teniendo preferencia el que hayamos indicado. dependiendo del tipo de fichero puede tomar distintos valores. los más habituales son:

• type="audio/wav" : para archivos de audio con extensión .wav.
• type="audio/midi" : para archivos de audio con extensión .mid.
• type="application/mpeg" : para archivos de audio o de vídeo del tipo mpeg. Archivos con extensiones .mp3 .mpg .mpeg .mp4 . También puede usarse con videos con extensión .avi, ya que también lo reproduce, y a veces el usuario no tiene instalado el plugin para videos avi. También podemos usar los valores type="audio/mpeg" o type="video/mpeg" según sea el archivo de audio o de video.
• type="application/mov" : para archivos de video con extensión .mov.
• type="application/wmv" : para archivos de video con extensión .wmv.
• type="application/x-shockwave-flash" : para archivos flash de video con extensión .swf.
• type="application/ogg" : Para archivos con extension ogg (audio o video) y ogv(video). También podemos emplear type="audio/ogg", para sonido o "type="video/ogg", para video.
• type="audio/webm" ; type="video/webm", para archivos en formato webm (recomendados por HTML5).

Lo que indica este atributo es lo que se llama el tipo MIME al que pertenece el objeto. Cada tipo de fichero pertenece a un tipo MIME distinto, hay que tener cuidado de poner para cada tipo de fichero el tipo que le corresponde o que sea compatible. En el siguiente enlace hay una lista con todos los tipos MIME aceptados, aunque la página está en inglés, creo que la tabla con los tipos se entiende bastante bien:

https://developer.mozilla.org/es/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Lista_completa_de_tipos_MIME

pluginspage="URL"

Este atributo indica en caso de ser necesario, el plugin que reproducirá el fichero, o la página web donde puede descargarse el mismo. Solo se activa en caso de que el navegador no pueda reproducir el fichero por sí mismo o no disponga del plugin adecuado.

name="nombre"

Al igual que en otros casos vistos anteriormente, podemos dar un nombre a la etiqueta, que servirá de referencia para trabajar con enlaces o con código javascript.

volume="v"

para archivos de sonido, indica el volumen al que debe reproducirse inicialmente el archivo. el valor es un número entre 0 y 100, siendo el valor por defecto 50 en plataformas PC y 75 en MAC.

atributos referentes a la consola.

hidden="true/false"

Este atributo es sólo para los archivos de sonido. El valor true permite no mostrar la consola de sonido. con lo cual si no hemos puesto el atributo autostar="false" el sonido se reproducirá al cargarse la página, sin que haya una consola para modificarlo. El valor hidden="false" en principio debe mostrar la consola, pero no funciona bien en todos los navegadores, por lo que es preferible no usarlo, ya que ésta se muestra por defecto.

width="w" height="h"

Indican el ancho (w) y el alto (h) visible de la consola en píxeles. Se entiende por consola la barra de comandos del audio o video. Debemos tener en cuenta que algunas consolas son de tamaño fijo, y por lo tanto debemos darle un espacio igual o mayor del que ocupan para que pueda verse entera.

align="left/center/right/..."

Define la alineación horizontal o vertical de la consola, respecto a los elementos de la página. Funciona igual que con la etiqueta img y tiene los mismos valores que ésta.

hspace="hs" vspace="vs"

Define la separación vertical y horizontal de la consola respecto a los otros elementos de la página. Funciona igual que en la etiqueta img. sin embargo tendremos los mismos problemas que con las etiquetas de imagen, por lo que se recomienda posicionar la consola (bien sea de audio o de video), mediante el código CSS.

Utilización de la etiqueta embed

Un ejemplo de etiqueta embed para sonido es el siguiente:

<embed src="sonido.mid" loop="1" playcount="1" type="audio/midi" autostart="false" width="200" height="50" />

Un ejemplo de etiqueta embed para video es el siguiente:

<embed src="http://mivideo.mov" type="application/mov" width="400" height="300" autostart="false" ></embed>

También se puede utilizar la etiqueta embed para mostrar en la página archivos de Adobe Reader (Texto en PDF).

La consola de la etiqueta embed tiene un comportamiento similar a la etiqueta img en cuanto a posicionamiento, por lo que admite los mismos atributos.

El problema de la etiqueta embed es que el usuario no siempre tiene instalado en su equipo los plugins necesarios para ver el archivo, por lo que se recomienda utilizar los formatos de archivo más usados. ya que suelen ser los formatos que soportan la mayoría de los navegadores. Otra opción es poner un enlace al archivo para que en caso de no poder verse, el usuario pueda descargárselo.

La etiqueta embed fue creada por el navegador Netscape, pero enseguida la fueron incorporando los demás navegadores, por lo que es posible que versiones antiguas de Internet Explorer no la reconozcan.

La etiqueta no es reconocida por el estándar oficial del HTML 4.01 y del XHTML 1.0 del W3C (World Wide Web Consortium), con lo cual la página no pasa el proceso de validación, (en temas posteriores veremos qué es esto) pero esto no impide que funcione en la mayoría de navegadores, siempre que se tengan los plugins adecuados para ver los archivos.

Sin embargo el nuevo HTML5 sí que reconoce ya la etiqueta embed, por lo que en HTML5 sí que se pasa el proceso de validación.

---

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

Etiqueta object.

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