Elemento source

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento source permite a los autores proveer diferentes versiones de un archivo en los elementos de medios (audio y video) y las imágenes (picture). Un elemento de medios o imagen puede contener uno o más elementos source, cada uno de lo cuales provee una versión diferente del medio (codificado utilizando un códec diferente) o imagen (en diferentes tamaños o formatos). Entonces, queda en manos del navegador elegir qué recurso cargar, una decisión que tomará en base a los formatos que soporta y a las dimensiones de la imagen (mejor coincidencia).

Los autores deben elegir una de las dos formas de especificar un recurso de medios pero nunca ambas. Si se declara el atributo src en el elemento de medios (audio y video), no será posible proveer alternativas con el elemento source.

El soporte provisto por los navegadores para el elemento picture es muy bajo. Los autores pueden tener que recurrir a media queries para lograr el mismo efecto consistentemente, hasta que el soporte crezca.

Ejemplos

En el siguiente ejemplo, proveeremos un archivo de audio en dos formatos diferentes con el elemento source, permitiendo a los navegadores elegir la versión que son capaces de soportar.

Para los navegadores que soportan al elemento audio, no hace falta proveer más que dos formatos (MP3 y Ogg) para hacer que el audio sea reproducido correctamente en todos los navegadores.

<audio controls>
  <source src="../../../audio/Jahzzar_The_Flowers_Are_Still_Standing.ogg" type="audio/ogg">
  <source src="../../../audio/Jahzzar_The_Flowers_Are_Still_Standing.mp3" type="audio/mpeg">
</audio>

El audio corresponde a la canción "The Flowers Are Still Standing" (Jahzzar) / CC BY-SA 4.0.

En nuestro segundo ejemplo, insertaremos un video. Como en el caso anterior, el elemento source nos ayuda a proveer más de un formato, permitiendo así a los navegadores elegir la versión que mejor soportan.

Para los navegadores que soportan al elemento video, no hace falta proveer más que dos formatos (MP4 y Ogg) para hacer que el video sea reproducido correctamente en todos los navegadores. Sin embargo, pondremos a disponibilidad una tercera versión, WebM, por ser la mejor candidata a convertirse en el estándar para web en el futuro cercano.

Para mejorar la compatibilidad aún más, pondremos a la versión en MP4 primero, para evitar un error particular en los navegadores de iPad.

<video width="384" height="288" controls>
  <source src="../../../videos/A_Flight_To_Mars.mp4" type="video/mp4">
  <source src="../../../videos/A_Flight_To_Mars.webm" type="video/webm">
  <source src="../../../videos/A_Flight_To_Mars.ogg" type="video/ogg">
</video>

Ahora, el elemento picture es usado para ofrecer un par de versiones de la misma imagen en diferentes tamaños. Aquí el atributo srcset se vuelve escencial a la hora de proveer el recurso de imagen, mientras que el atributo media define en qué situaciones debería ser usado cada elemento source.

El soporte provisto por los navegadores para el elemento picture es muy bajo. Los autores pueden tener que recurrir a media queries para lograr el mismo efecto consistentemente, hasta que el soporte crezca.

<picture>
  <source media="(min-width: 1280px)" srcset="../../../images/charles-darwin-l.jpg">
  <source media="(max-width: 520px)" srcset="../../../charles-darwin-s.jpg">
  <img class="flr" src="../../../images/charles-darwin.jpg" alt="Charles Robert Darwin">
</picture>
<p>Charles Robert Darwin fue un naturalista inglés que postuló todas las especies de seres vivos que han evolucionado con el tiempo a partir de un antepasado común mediante un proceso denominado selección natural. La evolución fue aceptada como un hecho por la comunidad científica y por buena parte del público en vida de Darwin, mientras que su teoría de la evolución mediante selección natural no fue considerada como la explicación primaria del proceso evolutivo hasta los años 1930.</p>
<p> Actualmente constituye la base de la síntesis evolutiva moderna. Con sus modificaciones, los descubrimientos científicos de Darwin aún siguen siendo el acta fundacional de la biología como ciencia, puesto que constituyen una explicación lógica que unifica las observaciones sobre la diversidad de la vida.</p>
Charles Robert Darwin

Charles Robert Darwin fue un naturalista inglés que postuló todas las especies de seres vivos que han evolucionado con el tiempo a partir de un antepasado común mediante un proceso denominado selección natural. La evolución fue aceptada como un hecho por la comunidad científica y por buena parte del público en vida de Darwin, mientras que su teoría de la evolución mediante selección natural no fue considerada como la explicación primaria del proceso evolutivo hasta los años 1930.

Actualmente constituye la base de la síntesis evolutiva moderna. Con sus modificaciones, los descubrimientos científicos de Darwin aún siguen siendo el acta fundacional de la biología como ciencia, puesto que constituyen una explicación lógica que unifica las observaciones sobre la diversidad de la vida.

Por último, proveeremos una imagen (picture) en dos formatos diferentes: el nuevo WebP, que presenta escaso soporte por parte de los navegadores, y el tradicional PNG que es soportado en todas partes. Al proveer la imagen con el nuevo formato en un source y a la de respaldo en img permitiremos que los navegadores que soportan al elemento usen WebP, mientras dejamos a aquellos que no lo soportan mostrar la versión bien conocida PNG.

<picture>
  <source type="image/webp" srcset="../../../images/camera.webp">
  <img src="../../../images/camera.png" alt="Esquema de una cámara fotográfica">
</picture>
Esquema de una cámara fotográfica

Atributos

Atributos específicos

src

El URI (ubicación) del recurso de medios (audio o video) que este elemento provee.

Este atributo solo puede ser declarado en un elemento source que sea hijo de un elemento de medios (audio o video).

Ejemplo

<audio controls>
  <source src="../../../audio/Jahzzar_Please_Listen_Carefully.ogg" type="audio/ogg">
  <source src="../../../audio/Jahzzar_Please_Listen_Carefully.mp3" type="audio/mpeg">
</audio>

El audio corresponde a la canción "Please Listen Carefully" (Jahzzar) / CC BY-SA 4.0.

type

El tipo de contenido (o Tipo de medio de Internet) que se espera que tenga el recurso provisto por el elemento. En el caso de los elementos de medios, los autores pueden especificar adicionalmente los códecs necesarios para manejar correctamente al archivo, agregando luego del tipo:

  1. Un punto y coma (";").
  2. Un número de caracteres de espacio.
  3. La palabra "codecs".
  4. Un signo igual ("=").
  5. La información de los códecs. Si esta información contiene caracteres de espacio, debe ser encerrada entre comillas simples o dobles. Las comillas utilizadas deben ser diferentes a las usadas para encerrar al contenido del atributo.

El contenido de este atributo brinda al navegador una pista acerca del tipo de recurso que el elemento provee. Esto puede ayudarlos a decirdir qué recurso cargar antes de buscarlo.

Ejemplo

<audio controls>
  <source src="../../../audio/Jahzzar_Sketch_Rum_Portrait.ogg" type="audio/ogg; codecs='vorbis'">
  <source src="../../../audio/Jahzzar_Sketch_Rum_Portrait.mp3" type="audio/mpeg">
</audio>

El audio corresponde a la canción "Sketch (rum-portrait)" (Jahzzar) / CC BY-SA 3.0.

srcset

Una lista de cadenas de imágenes cadidatas separadas una de otra por comas (","). Cada uno de los elementos en esta lista representa una alternativa a la imagen original, diseñada específicamente para medios con un tamaño de pantalla o una densidad de píxeles en particular (por ejemplo, dispositivos con pantallas reducidas, como los celulares). Una cadena de imagen candidata se debe componer por:

  1. Cero o más caracteres de espacio (" ").
  2. El URI del recurso de imagen.
  3. Cero o más caracteres de espacio (" ").
  4. Opcionalmente, uno de los siguientes:
    • Un descriptor de ancho con la siguiente estructura:
      1. Un carácter de espacio (" ").
      2. Un entero no negativo representando el ancho del recurso.
      3. Una letra minúscula W ("w").
    • Un descriptor de densidad de píxeles con la siguiente estructura:
      1. Un carácter de espacio (" ").
      2. Un real no negativo representando la densidad de píxeles del recurso.
      3. Una letra minúscula X ("x").

Si una cadena de imagen candidata tiene un descriptor de ancho, entonces todas las cadenas de imágenes candidatas deben tener el descriptor de ancho especificado. Asimismo, la presencia de una cadena de imágen candidata con un descriptor de ancho implica que la presencia del atributo sizes es obligatoria.

No deben haber dos cadenas de imágenes candidatas con los mismos descriptores en el elemento. Una cadena de imagen candidata sin descriptores es equivalente a una cadena de imagen candidata con un descriptor de densidad de píxeles de "1x".

Este atributo solo puede ser declarado en un elemento source que sea hijo de un elemento picture. En tales casos, su presencia es obligatoria.

Este atributo ha sido introducido recientemente en HTML5. Se aconseja a los autores esperar un soporte reducido por parte de los navegadores para sus características.

Ejemplo

<picture>
  <source media="(min-width: 1024px)" srcset="../../../images/Lunar_map_(large).jpg">
  <img src="../../../images/Lunar_map.jpg" alt="First map of the moon made by Thomas Harriot in 1609">
</picture>
First map of the moon made by Thomas Harriot in 1609

sizes

Una lista de tamaños de fuentes válidos, separados por comas. Cada tamaño de fuente (con la excepción del último) debe estar compuesto por:

  1. Opcionalmente:
    1. Una condición de media query que indique en qué casos se deberá aplicar este tamaño.
    2. Un caráter de espacio (" ").
  2. El ancho que tomará la imagen en unidades CSS.

El último tamaño de fuente debe estar compuesto únicamente por el ancho de la imagen en unidades CSS, y será usado por el navegador como predeterminado.

Los navegadores que soporten este mecanismo elegirán de entre las imágenes provistas en el atributo srcset, la que encaje mejor en la configuración del dispositivo en el que deberá ser mostrada, tomando en cuenta la información de este atributo. Este método ha sido diseñado para simplificar la tarea de proveer imágenes en páginas que se adaptan al área de visualización y confía al navegador la elección de la imagen más apropiada para ser mostrada dadas las condiciones que se presentan.

Este atributo solo puede ser declarado si el atributo srcset está presente y tiene al menos un recurso de imagen con un descriptor de ancho.

Este ejemplo no muestra una versión en vivo debido a que no está pensado para trabajar dentro del esquema de la página. Su uso de porcentajes del ancho de la pantalla (vw) para establecer el ancho de la imagen, desarmaría el cuadro del ejemplo.

Ejemplo

<picture>
  <source srcset="../../../images/Lunar_map_(large).jpg 640w, ../../../images/Lunar_map.jpg 300w, ../../../images/Lunar_map_(small).jpg 100w" sizes="(min-width: 75em) 25vw, (max-width: 20em) 80vw, 50vw">
  <img src="../../../images/Lunar_map.jpg" alt="First map of the moon made by Thomas Harriot in 1609">
</picture>

media

Una condición de media query que la configuración del dispositivo deberá satisfacer para que el recurso de imagen provisto por este elemento sea utilizado.

Este atributo solo puede ser declarado en un elemento source que es hijo de un elemento picture. Su uso con elementos de medios es inválido.

Ejemplo

<picture>
  <source media="(min-width: 1024px)" srcset="../../../images/Lunar_map_(large).jpg">
  <source media="(max-width: 320px)" srcset="../../../images/Lunar_map_(small).jpg">
  <img src="../../../images/Lunar_map.jpg" alt="Primer mapa de la luna hecho por Thomas Harriot en 1609">
</picture>
Primer mapa de la luna hecho por Thomas Harriot en 1609

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.