10. Elementos Multimedia

Versión para imprimir.

En esta lección se presentan algunos elementos para el manejo de multimedia.

A. Imágenes

El elemento img

  • Es un elemento de fraseo que muestra una imagen.

  • Puede tener los siguientes atributos:

    src

    URL del recurso.

    alt

    Texto que se muestra cuando no se puede descargar la imagen.

El elemento figure

  • Es un elemento de agrupamiento específicamente diseñado para mostrar imágenes.

El elemento figcaption

  • Es un elemento de agrupamiento específicamente diseñado para mostrar el texto que describe el contenido de un figure.

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>Imágenes</title>
</head>
<body>
 <h1>Imágenes</h1>
 <style>
  img {
   max-width: 100%
  }
 </style>
 <figure>
  <img alt="Un gatito"
    src="https://media.giphy.com/media/MDJ9IbxxvDUQM/giphy.gif">
  <figcaption>Gatito.</figcaption>
 </figure>
 <footer>
  <p>
   Imágen de
   <a href="https://giphy.com"
     target="_blank">
    Giphy</a>.
  </p>
 </footer>
</body>
</html>

Solo para los más rudos

B. Audio y Video

Atributos Comunes

  • Los elementos multimedia audio y video tienen los siguientes atributos en común:

    src

    La URL del recurso de audio o video a desplegar. Si está presente, debe contener una URL no vacía. Puede rodearse con espacios.

    crossorigin

    Especifica el valor CORS (Cross-origin resource sharing), que puede ser:

    • anonymous
    • use-credentials
    preload

    Puede tener los siguientes valores:

    none

    El recurso no se descarga antes de reproducirse, pues no se espera que el usuario necesite el recurso, o el servidor espera minimizar tráfico innecesario. No se proporciona ningún indicio sobre la agresividad para descargar el recurso una vez que se empieza a reproducir.

    metadata

    Descargar solamente los metadatos del recurso (dimensiones, lista de títulos, duración, etc.) y aún unos pocos cuadros del inicio. Una vez iniciada la reproducción, los datos se descargan a la velocidad más baja que garantice una reproducción consistente.

    auto

    El usuario puede descargar el recurso agresivamente sin riesgo para el servidor, incluyendo la descarga total antes de reproducirse.

    autoplay

    Es un atributo booleano. Cuando está presente, se inicia la reproducción del recurso tan pronto como se pueda, sin detenerse. Se recomienda no usar esta característica y permitir al usuario iniciar la reproducción explícitamente.

    loop

    Es un atributo booleano. Si está presente, indica que cuando la reproducción del recurso termine, debe reiniciar.

    muted

    Es un atributo booleano. Su presencia silencia la salida de audio, potencialmente contraviniendo las preferencias del usuario.

    controls

    Es un atributo booleano. Cuando se especifica, indica que se deben mostrar los controles del elemento.

C. El elemento audio

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>Audio</title>
</head>
<body>
 <h1>Audio</h1>
 <p>
  <audio controls
    src="https://www.royaltyfreemusicclips.com/pir/libs/media/1234_Rock_it.wav">
   Tu navegador no soporta audio.
  </audio>
 </p>
 <footer>
  <p>
   Música gratuita libre de
   regalías por
   <a target="_blank"
     href="https://www.royaltyfreemusicclips.com">
    Royalty Free Music Clips</a>.
  </p>
 </footer>
</body>
</html>

Solo para los más rudos

D. El elemento video

Atributos adicionales

poster

Proporciona la URL de una imagen que se muestra mientras no se haya cargado ningún byte del video.

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>Video</title>
 <style>
  video {
   max-width: 100%
  }
 </style>
</head>
<body>
 <h1>Video</h1>
 <figure>
  <video autoplay loop
    src="https://media.giphy.com/media/1W62t8wP8m1iM/giphy.mp4">
   Tu navegador no soporta video.
  </video>
 </figure>
 <footer>
  <p>
   Video de
   <a href="https://giphy.com"
     target="_blank">
    Giphy</a>.
  </p>
 </footer>
</body>
</html>

Solo para los más rudos

E. Imagen de fondo

Salida.

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
      content="width=device-width,
       initial-scale=1.0">
    <title>Fondo</title>
    <style>
      html {
        /* Como el fondo es
         * oscuro, se escoje un
         * color de letra que no
         * se pierda. */
        color: white;
        /* URL de la imagen de
         * fondo. Es este caso
         * está hospedada en
         * "giphy.com". */
        background-image:
          url(https://media.giphy.com/media/3oKIPhf02cXU9W4Le0/giphy.gif);
        /* La imagen de fondo no
         * se repite en caso de
         * que sea más pequeña que
         * el elemento en que se
         * coloca. En este caso
         * html es la ventana. */
        background-repeat: no-repeat;
        /* La imagen de fondo se
         * muestra centrada
         * horizontalmente. */
        background-position-x:
          center;
        /* La imagen de fondo se
         * muestra centrada
         * verticalmente. */
        background-position-y:
          center;
        /* La imagen de fondo se
         * muestra fija y no se
         * desplaza. */
        background-attachment:
          fixed;
        /* Distintas propiedades
         * para distintos
         * navegadores indicando
         * que la imagen de fondo
         * tiene un tamaño que
         * cubre toda la ventana.
         */
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
      }

      /* Estilo para las anclas o
       * hipervínculos. */
      a {
        /* Como el fondo es
         * oscuro, se escoje un
         * color de letra que no
         * se pierda y se distinga
         * del resto del texto. */
        color: yellow;
      }
    </style>
  </head>
  <body>
    <h1>Fondo</h1>
    <p>
      Este ejemplo te muestra como
      poner fondo a una página.
    </p>
    <footer>
      <p>
        &copy; 2022
        Gilberto Pacheco Gallegos.
      </p>
      <p>
        Imagen de
        <!--
          Ancla o hipervínculo a
          un sitio. El contenido
          es el texto que se
          muestra subrayado y al
          hacer clic en el
          hipervínculo se abre la
          URL indicada en el
          atributo href.
          
          href="https://giphy.com"
            La URL que abre este
            hipervínculo es
              https://giphy.com
        -->
        <a href="https://giphy.com">
          https://giphy.com</a>.
      </p>
    </footer>
  </body>
</html>

F. Resumen