Módulo 7: Multimedia y elementos avanzados en HTML

 

Módulo 7: Multimedia y elementos avanzados en HTML

En esta lección aprenderás a integrar multimedia en tus páginas web usando HTML. Veremos cómo insertar audio, video y cómo usar <iframe> para mostrar contenido externo como mapas y videos de YouTube.

---

Insertar Audio en HTML

Para agregar audio a una página usamos la etiqueta <audio>.

<audio controls> <source src="musica.mp3" type="audio/mpeg"> Tu navegador no soporta audio. </audio>

Salida:

• controls: muestra los botones de reproducción.
• autoplay: reproduce automáticamente (no recomendado por usabilidad).
• loop: repite el audio en bucle.

---

Insertar Video en HTML

La etiqueta <video> funciona de forma similar al audio.

<video controls width="400"> <source src="video.mp4" type="video/mp4"> Tu navegador no soporta video. </video>

Salida:

• controls: muestra los botones de reproducción.
• autoplay: reproduce automáticamente.
• loop: repite el video en bucle.
• width y height: ajustan el tamaño.

---

Uso de <iframe>

Un <iframe> (marco en línea) permite mostrar contenido de otra página dentro de la tuya, como videos de YouTube o mapas de Google.

<iframe width="560" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY" frameborder="0" allowfullscreen></iframe>

Salida:

También podemos insertar un mapa de Google:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.019!2d-122.4194!3d37.7749" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy"> </iframe>

---

Buenas prácticas de multimedia

• Incluye siempre controls para que el usuario pueda pausar.
• Evita el uso de autoplay sin necesidad.
• Agrega varias fuentes de audio/video si quieres compatibilidad total.
• Usa alt y title en iframes para accesibilidad.

---

Preguntas de Repaso

Pregunta 1

¿Qué etiqueta se usa para insertar un audio?

• A) <sound>
• B) <audio>
• C) <music>
• D) <mp3>

✅ Respuesta correcta: B) <audio>

---

Pregunta 2

¿Qué atributo hace que un audio o video se repita en bucle?

• A) repeat
• B) loop
• C) cycle
• D) replay

✅ Respuesta correcta: B) loop

---

Pregunta 3

¿Qué etiqueta se usa para incrustar un video de YouTube?

• A) <video>
• B) <iframe>
• C) <youtube>
• D) <embed>

✅ Respuesta correcta: B) <iframe>

---

Pregunta 4

¿Qué atributo permite que el usuario controle la reproducción?

• A) manage
• B) buttons
• C) controls
• D) interface

✅ Respuesta correcta: C) controls

---

Pregunta 5

¿Cuál es una buena práctica al usar multimedia en HTML?

• A) Siempre usar autoplay
• B) Nunca incluir controles
• C) Usar varias fuentes para compatibilidad
• D) Evitar títulos y descripciones

✅ Respuesta correcta: C) Usar varias fuentes para compatibilidad

Esta lección forma parte del curso básico de HTML. En la próxima veremos Tablas en HTML y cómo presentarlas correctamente.