12. 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.

1<!DOCTYPE html>
2<html lang="es">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width">
7 <title>Imágenes</title>
8</head>
9<body>
10 <h1>Imágenes</h1>
11 <style>
12 img {
13 max-width: 100%
14 }
15 </style>
16 <figure>
17 <img alt="Un gatito"
18 src="https://media.giphy.com/media/MDJ9IbxxvDUQM/giphy.gif">
19 <figcaption>Gatito</figcaption>
20 </figure>
21 <footer>
22 <p>
23 Imágen de
24 <a target="_blank" rel="noreferrer" href="https://giphy.com">Giphy</a>.
25 </p>
26 </footer>
27</body>
28</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.

1<!DOCTYPE html>
2<html lang="es">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width">
7 <title>Imágenes</title>
8</head>
9<body>
10 <h1>Imágenes</h1>
11 <style>
12 img {
13 max-width: 100%
14 }
15 </style>
16 <figure>
17 <img alt="Un gatito"
18 src="https://media.giphy.com/media/MDJ9IbxxvDUQM/giphy.gif">
19 <figcaption>Gatito</figcaption>
20 </figure>
21 <footer>
22 <p>
23 Imágen de
24 <a target="_blank" rel="noreferrer" href="https://giphy.com">Giphy</a>.
25 </p>
26 </footer>
27</body>
28</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.

1<!DOCTYPE html>
2<html lang="es">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport"
7 content="width=device-width">
8 <title>Video</title>
9 <style>
10 video {
11 max-width: 100%
12 }
13 </style>
14</head>
15
16<body>
17 <h1>Video</h1>
18 <figure>
19 <video autoplay loop
20 src="https://media.giphy.com/media/1W62t8wP8m1iM/giphy.mp4">
21 Tu navegador no soporta video.
22 Usa el siguiente enlace
23 <a target="_blank" rel="noreferrer"
24 href="https://media.giphy.com/media/1W62t8wP8m1iM/giphy.mp4">Para abrir el
25 video</a>
26 </video>
27 </figure>
28 <footer>
29 <p>
30 Video de
31 <a target="_blank" rel="noreferrer"
32 href="https://giphy.com">Giphy</a>.
33 </p>
34 </footer>
35</body>
36
37</html>

Solo para los más rudos

E. Imagen de fondo

Salida.

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport"
7 content="width=device-width">
8 <title>Fondo</title>
9 <style>
10 html {
11 /* Como el fondo es oscuro, se
12 * escoje un color de letra que
13 * no se pierda. */
14 color: white;
15 /* URL de la imagen de fondo. En
16 * este caso está hospedada en
17 * "giphy.com". */
18 background-image:
19 url(https://media.giphy.com/media/3oKIPhf02cXU9W4Le0/giphy.gif);
20 /* La imagen de fondo no se
21 * repite en caso de que sea más
22 * pequeña que el elemento en
23 * que se coloca. En este caso
24 * html es la ventana. */
25 background-repeat: no-repeat;
26 /* La imagen de fondo se muestra
27 * centrada horizontalmente. */
28 background-position-x:
29 center;
30 /* La imagen de fondo se muestra
31 * centrada verticalmente. */
32 background-position-y:
33 center;
34 /* La imagen de fondo se muestra
35 * fija y no se desplaza. */
36 background-attachment:
37 fixed;
38 /* Distintas propiedades para
39 * distintos navegadores
40 * indicando que la imagen de
41 * fondo tiene un tamaño que
42 * cubre toda la ventana. */
43 -webkit-background-size: cover;
44 -moz-background-size: cover;
45 -o-background-size: cover;
46 background-size: cover;
47 }
48
49 /* Estilo para las anclas o
50 * hipervínculos. */
51 a {
52 /* Como el fondo es oscuro, se
53 * escoje un color de letra que
54 * no se pierda y se distinga
55 * del resto del texto. */
56 color: yellow;
57 }
58 </style>
59</head>
60
61<body>
62 <h1>Fondo</h1>
63 <p>
64 Este ejemplo te muestra como
65 poner fondo a una página.
66 </p>
67 <footer>
68 <p>
69 © 2022
70 Gilberto Pacheco Gallegos.
71 </p>
72 <p>
73 Imagen de
74 <a href="https://giphy.com">
75 https://giphy.com</a>.
76 </p>
77 </footer>
78</body>
79
80</html>

F. Resumen