HTML + Multimedia
Tutorial 2
Resumen Duración
35 min
En este tutorial conocerás cómo agregar elementos multimedia a
una aplicación HTML, mediante las etiquetas básicas soportadas a Autor
partir de las versión 5 de dicho estándar. Juan Vicente Pradilla Cerón
Fecha de Creación
09/08/2023
Licencia
1. Multimedia en HTML
Duración: 15 min
HTML (HyperText Markup Language) soporta la presentación de imágenes desde hace muchos años,
sin embargo, solo fue hasta el lanzamiento de su versión 5.0 que incorporó etiquetas que permiten la
incorporación de elementos de audio y video.
Dentro de los archivos HTML los elementos de imagen se agregan mediante la etiqueta img donde
mediante el atributo src se indica la ruta desde donde se puede cargar la imagen. Por su parte, la
etiqueta audio permite la inclusión de archivos de audio y el atributo src cumple la misma función que
en el caso de las imágenes. Finalmente, la etiqueta video es la encargada de incrustar archivos de video
dentro del HTML, utilizando el atributo src para indicar la URL del archivo a visualizar (tenga en cuenta
que para soportar varios codec de video o de audio debe emplear el elementos source).
Documentación
Revise la documentación sobre las etiquetas img, audio, video y source en el sitio oficial de Mozilla
2. Agregando elementos multimedia a aplicación HTML
Duración: 35 min
Creando una proyecto en CodeSandbox
En este tutorial utilizaremos el entorno de desarrollo CodeSandbox para trabajar con HTML y archivos
multimedia.
1. Desde el navegador Web accede a la página de Codesandbox ([Link]
2. Inicia sesión en la aplicación, mediante el botón superior izquierdo - Sign In (Fig. 1)
Figura 1. Iniciar sesión en CodeSandbox - Paso 1
3. En el formulario que se despliega selecciona Iniciar sesión con GitHub, usa las credenciales de
la cuenta que creaste anteriormente (Fig. 2)
Figura 2. Iniciar sesión en CodeSandbox - Paso 2
4. Dentro de CodeSandbox crea un nuevo proyecto, presionando en el botón New Sandbox (Fig.
3)
Figura 3. Crear un nuevo proyecto en CodeSandbox - Paso 1
5. Escoge la plantilla de [Link] desde las plantillas oficiales (Fig. 4)
Figura 4. Crear un nuevo proyecto en CodeSandbox - Paso 2
Cargando recursos a un proyecto en CodeSandbox
1. Cree una nueva carpeta en el explorador de archivos del proyecto, llamada img. Con ese fin
use el icono de carpeta nueva que está en la cabecera del explorador de archivos (Fig. 5).
Figura 5. Crear un nueva carpeta en el proyecto de CodeSandbox
2. Descarga la imagen desde el siguiente enlace:
Descargar
3. Cargue la imagen del punto anterior a la carpeta img del proyecto en CodeSandbox. Usando
para esto el icono de flecha hacia arriba que está en la cabecera del explorador de archivos (Fig.
6).
Figura 6. Cargar un archivo en el proyecto de CodeSandbox
4. Abra la administración de almacenamiento de CodeSandbox. Mediante el menú desplegable
de la esquina superior derecha (Fig. 7).
Figura 7. Ingresar a la administración de almacenamiento de CodeSandbox
5. Presione doble clic sobre la imagen que subió anteriormente. Esta acción abrirá una nueva
pestaña con la imagen cargada (Fig. 8).
Figura 8. Abrir la imagen cargada dentro de CodeSandbox
6. Copie la URL de la imagen presente en la pestaña nueva que se abrió, desde la barra de
direcciones de su navegador Web
7. Cree una nueva carpeta en el explorador de archivos del proyecto, llamada aud. Con ese fin
use el icono de carpeta nueva que está en la cabecera del explorador de archivos (Fig. 9).
Figura 9. Crear un nueva carpeta en el proyecto de CodeSandbox
8. Descarga el sonido desde el siguiente enlace:
Descargar
9. Cargue el sonido del punto anterior a la carpeta aud del proyecto en CodeSandbox. Usando
para esto el icono de flecha hacia arriba que está en la cabecera del explorador de archivos (Fig.
10).
Figura 10. Cargar un archivo en el proyecto de CodeSandbox
10. Abra la administración de almacenamiento de CodeSandbox. Mediante el menú desplegable
de la esquina superior derecha (Fig. 11).
Figura 11. Ingresar a la administración de almacenamiento de CodeSandbox
11. Presione doble clic sobre el sonido que subió anteriormente. Esta acción abrirá una nueva
pestaña con el sonido cargado (Fig. 12).
Figura 12. Abrir el sonido cargado dentro de CodeSandbox
12. Copie la URL del sonido presente en la pestaña nueva que se abrió, desde la barra de
direcciones de su navegador Web
13. Cree una nueva carpeta en el explorador de archivos del proyecto, llamada vid. Con ese fin
use el icono de carpeta nueva que está en la cabecera del explorador de archivos (Fig. 13).
Figura 13. Crear un nueva carpeta en el proyecto de CodeSandbox
14. Descarga el video desde el siguiente enlace:
Descargar
15. Cargue el video del punto anterior a la carpeta vid del proyecto en CodeSandbox. Usando para
esto el icono de flecha hacia arriba que está en la cabecera del explorador de archivos (Fig. 14).
Figura 14. Cargar un archivo en el proyecto de CodeSandbox
16. Abra la administración de almacenamiento de CodeSandbox. Mediante el menú desplegable
de la esquina superior derecha (Fig. 15).
Figura 15. Ingresar a la administración de almacenamiento de CodeSandbox
17. Presione doble clic sobre el video que subió anteriormente. Esta acción abrirá una nueva
pestaña con la imagen cargada (Fig. 16).
Figura 16. Abrir el video cargado dentro de CodeSandbox
18. Copie la URL del video presente en la pestaña nueva que se abrió, desde la barra de
direcciones de su navegador Web
Modificando el documento HTML por defecto
1. Modifica el contenido del archivo [Link], usando el editor de código. Reemplaza el
contenido por el siguiente:
URL_IMAGEN
Debe reemplazar en el contenido del archivo HTML el valor URL_IMAGEN por la URL de la imagen
cargo en el proyecto de CodeSandbox
URL_AUDIO
Debe reemplazar contenido del archivo HTML el valor URL_AUDIO por la URL del audio que cargo en
el proyecto de CodeSandbox
URL_VIDEO
Debe reemplazar contenido del archivo HTML el valor URL_VIDEO por la URL del video que cargo en
el proyecto de CodeSandbox
[Link]
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Tutorial 2</title>
</head>
<body>
<header>
<div>Cabecera del documento</div>
</header>
<nav>
<a href="#">Enlace 1</a>
<a href="#">Enlace 2</a>
</nav>
<main>
<img
src="URL_IMAGEN"
height="200"
/>
<audio
controls
src="URL_AUDIO"
></audio>
<video
src="URL_VIDEO"
height="200"
controls
></video>
</main>
<footer>
<div>Pie del documento</div>
</footer>
</body>
</html>
2. Guarda el archivo mediante el menú File/Save o usando el atajo de teclado Ctrl+s
3. Observa la salida del navegador y la consola (Fig. 17).
Figura 17. Resultado del código implementado
3. Retos
1. Acceda a la página Web creada desde su teléfono inteligente. Use la generación de código QR
desde el navegador
2. Agregue un texto alternativo a la imagen cargada. Use el atributo alt de la etiqueta <img>
3. Cambie el tamaño de la imagen empleando los atributos width y height
4. Reproduzca en bucle el audio de la Web. Emplee el atributo loop con está finalidad
5. Desactive los controles del video, mediante el atributo controls
6. Cambie el tamaño del video empleando los atributos width y height
7. Active la reproducción automática del video mediante el atributo autoplay
8. Cargue y muestre la misma imagen pero utilizando la etiqueta <picture> ¿Cuándo utilizar está
etiqueta en lugar de la etiqueta <img>?