Lección 11: Multimedia en HTML
Introducción a la multimedia en HTML
HTML5 introdujo nuevas etiquetas y características que permiten incorporar fácilmente contenido multimedia en las páginas web. En esta lección, aprenderemos cómo incluir audio, video y otros elementos multimedia en nuestros sitios web.
Audio en HTML
La etiqueta <audio> permite reproducir archivos de audio directamente en el navegador.
HTML
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Tu navegador no soporta el elemento de audio.
</audio>
Atributos importantes:
controls: Muestra los controles de reproducción.autoplay: Inicia la reproducción automáticamente (no recomendado por razones de accesibilidad).loop: Repite el audio cuando termina.
Video en HTML
La etiqueta <video> permite incrustar videos en la página web.
HTML
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Tu navegador no soporta el elemento de video.
</video>
Atributos importantes:
widthyheight: Establecen las dimensiones del video.controls: Muestra los controles de reproducción.poster: Especifica una imagen para mostrar antes de que comience el video.
Incrustación de contenido externo
La etiqueta <iframe> permite incrustar contenido de otras fuentes, como videos de YouTube o mapas de Google.
HTML
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
Nota: Asegúrate de reemplazar "VIDEO_ID" con el ID real del video de YouTube.
Consideraciones de accesibilidad
Al incluir contenido multimedia, es importante considerar la accesibilidad:
- Proporciona subtítulos para videos usando la etiqueta
<track>. - Ofrece transcripciones para contenido de audio.
- Usa el atributo
altpara describir imágenes y contenido visual.
Ejercicio práctico
Crea una página HTML que incluya:
- Un elemento de audio con controles
- Un elemento de video con controles y una imagen de poster
- Un iframe que incruste un video de YouTube