HTML: lenguaje básico para crear páginas web
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 344
Visitas el mes pasado: 1399
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
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.
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.
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.
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.
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:
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.
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.
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.
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