Imágenes y multimedia

Una forma clicable de un mapa de imagen, con su propio enlace y texto alternativo. Siempre va dentro de map.

<img src="shapes.svg" alt="A blue square and a grey circle" width="240" height="120" usemap="#d-areas">
<map name="d-areas">
  <area shape="rect" coords="20,20,100,100" href="#" alt="The square">
  <area shape="circle" coords="170,60,40" href="#" alt="The circle">
</map>

LUZ no añade estilos: se mantiene el aspecto del navegador.

Reproduce sonido con los controles del propio navegador. Ofrece una fuente por formato de archivo y añade dentro un enlace al archivo para los navegadores que no puedan reproducirlo.

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support audio.
</audio>

Con estilos de elements/media.css, sin clase. LUZ hace que los controles ocupen todo el ancho. El componente .luz-player crea los suyos.

Muestra una imagen. Escribe siempre alt: describe la imagen o déjalo vacío si es decorativa.

<img src="shapes.svg" alt="A blue square and a grey circle" width="240" height="120">

Con estilos de elements/media.css, sin clase. LUZ la mantiene dentro de su caja y conserva la proporción.

Convierte partes de una imagen en enlaces, con un área por cada forma clicable. Vincúlalo al elemento img mediante usemap.

<img src="shapes.svg" alt="A blue square and a grey circle" width="240" height="120" usemap="#d-map">
<map name="d-map">
  <area shape="rect" coords="20,20,100,100" href="#" alt="The square">
  <area shape="circle" coords="170,60,40" href="#" alt="The circle">
</map>

LUZ no añade estilos: se mantiene el aspecto del navegador.

Un archivo de texto sincronizado con audio o vídeo, como subtítulos, subtítulos para sordos o títulos de capítulos. Va dentro del elemento audio o video.

<video controls preload="metadata" width="320" aria-label="A sun rises behind an arched window on a whitewashed wall. No sound.">
  <source src="video.mp4" type="video/mp4">
  <track kind="captions" srclang="en" label="English" src="captions.vtt" default>
</video>

Con estilos del componente del reproductor, de components/player.css: el botón de subtítulos, su menú de pistas y los subtítulos sobre el vídeo. Un vídeo sin el reproductor mantiene los subtítulos del navegador.

Reproduce vídeo con los controles del propio navegador. Ofrece siempre una alternativa textual y subtítulos si hay diálogo u otros sonidos.

<video controls preload="metadata" width="320" aria-label="A sun rises behind an arched window on a whitewashed wall. No sound.">
  <source src="video.mp4" type="video/mp4">
</video>

Con estilos de elements/media.css, sin clase. LUZ lo mantiene dentro de su caja. El componente .luz-player crea sus propios controles.