LM T2 MultimediaHTML5
Cargado por
Daniel Mora MartinezLM T2 MultimediaHTML5
Cargado por
Daniel Mora MartinezADMINISTRACIÓN DE
SISTEMAS INFORMÁTICOS EN RED
LENGUAJE DE TEMA 2: UTILIZACIÓN DE LENGUAJES DE MARCAS EN
MARCAS ENTORNOS WEB
MULTIMEDIA
1. MULTIMEDIA EN HTML 5
HTML5 dispone de varias etiquetas para trabajar con elementos multimedia. En concreto
se van a ver las etiquetas <audio> y <video>
2. LA ETIQUETA <audio> </audio>
La etiqueta <audio> sirve para definir cualquier tipo de sonido.
En la actualidad, existen tres tipos de sonido soportados por <audio>. Estos son mp3,
wav y ogg.
No todos los navegadores soportan los tres formatos en la siguiente tabla se muestra qué
navegadores soportan qué formato.
Navegador mp3 wav ogg
IE Sí No No
Chrome Sí Sí Sí
Firefox Sí Sí Sí
Safari Sí Sí No
Opera Sí Sí Sí
Los tipos para los formatos de audio son:
Formato MIME-type
mp3 audio/mpeg
ogg audio/ogg
wav audio/wav
La etiqueta <audio> es una etiqueta con contenido, es decir, existe la etiqueta de cierre
</audio>. El texto que aparezca como contenido, se mostrará cuando el navegador no
admita el audio a reproducir.
2.1. ATRIBUTOS DE <audio>
MULTIMEDIA EN HTML5 1
ADMINISTRACIÓN DE
SISTEMAS INFORMÁTICOS EN RED
Atributo Valor Descripción
autoplay autoplay Especifica que el audio se reproducirá de
forma automática.
controls controls Especifica que el navegador muestre unos
controles para el manejo del audio.
loop loop Especifica que el audio se vuelva a repetir
cuando haya terminado
muted muted Especifica que el audio esté silenciado.
preload auto Especifica que el audio se almacene
metadata temporalmente (auto) o no se almacena (none)
none o se almacene únicamente los metadatos
(metadata).
src URL Especifica la URL del fichero del audio.
2.2. EJEMPLO
<audio src='audio.mp3' type='audio/mp3'controls='controls'>
El navegador no ha podido cargar el audio audio.mp3
</audio>
3. LA ETIQUETA <video> </video>
La etiqueta <video> sirve para definir cualquier tipo de video.
En la actualidad, existen tres tipos de sonido soportados por <video>. Estos son mp4,
webM y ogg.
No todos los navegadores soportan los tres formatos en la siguiente tabla se muestra qué
navegadores soportan qué formato.
Navegador mp4 webM ogg
IE Sí No No
Chrome Sí Sí Sí
Firefox Sí Sí Sí
Safari Sí No No
Opera Sí Sí Sí
Los tipos para los formatos de audio son:
MULTIMEDIA EN HTML5 2
ADMINISTRACIÓN DE
SISTEMAS INFORMÁTICOS EN RED
Formato MIME-type
mp4 video/mp4
ogg video/ogg
WebM video/webm
La etiqueta <video> es una etiqueta con contenido, es decir, existe la etiqueta de cierre
</video>. El texto que aparezca como contenido, se mostrará cuando el navegador no
admita el vídeo a reproducir.
3.1. ATRIBUTOS DE <video>
Atributo Valor Descripción
autoplay autoplay Especifica que el vídeo se reproducirá de forma
automática.
controls controls Especifica que el navegador muestre unos
controles para el manejo del vídeo.
height pixels Especifica la altura del vídeo.
%
loop loop Especifica que el vídeo se vuelva a repetir
cuando haya terminado
muted muted Especifica que el audio del vídeo esté
silenciado.
poster URL Especifica la imagen que aparecen en el vídeo
hasta que se carga el vídeo, o hasta que el
usuario pulsa play.
preload auto Especifica que el vídeo se almacene
metadata temporalmente (auto), o no se almacena (none)
none o se almacene únicamente los metadatos
(metadata).
src URL Especifica la URL del fichero del vídeo.
width pixels Especifica la anchura del vídeo.
%
3.2. EJEMPLOS
<video src='video.mp4' type='video/mp4' width='50%' height='50%'
controls='controls'>
MULTIMEDIA EN HTML5 3
ADMINISTRACIÓN DE
SISTEMAS INFORMÁTICOS EN RED
El navegador no ha podido cargar el vídeo video.mp4
</video>
4. ETIQUETA <source></source>
La etiqueta <source> sirve para especificar los ficheros multimedia, como pueden ser
imágenes y vídeos. Debe ir como contenido de las etiquetas <audio> , <video> o
<picture>, pudiendo aparecer más de uno, de forma que el navegador pueda elegir entre
varios.
Se trata de una etiqueta sin contenido, por lo que no tiene etiqueta de cierre.
4.1. ATRIBUTOS <source>
Los principales atributos son:
Atributo Valor Descripción
src URL Especifica la URL del fichero multimedia.
Sólo se utiliza cuando va como
contenido de las etiquetas <audio> y
<video>.
srcset URL Especifica la URL del fichero de la
imagen. Sólo se utiliza cuando va como
contenido de la etiqueta <picture>.
media consulta_multimedia Especifica una consulta_multimedia para
el recurso. Normalmente se utiliza
cuando va como contenido de la
etiqueta <picture>
type MIME-type Especifica el tipo de recurso.
4.2. EJEMPLOS
<video width='50%' height='50%' controls='controls'>
MULTIMEDIA EN HTML5 4
ADMINISTRACIÓN DE
SISTEMAS INFORMÁTICOS EN RED
<source src='video.mp4' type='video/mp4' />
El navegador no ha podido cargar el vídeo video.mp4
</video>
MULTIMEDIA EN HTML5 5
