HTML & CSSIntroducción a HTMLLección 7 de 24
Multimedia: Audio, Video e Iframes
HTML5 introdujo etiquetas nativas para audio y video, eliminando la necesidad de plugins como Flash. La etiqueta <video> permite reproducir videos directamente en el navegador con controles integrados (play, pausa, volumen, pantalla completa). La etiqueta <audio> hace lo mismo para archivos de sonido.
Los iframes permiten incrustar contenido externo dentro de tu página: videos de YouTube, mapas de Google, publicaciones de redes sociales, o incluso otras páginas web completas. Son como una "ventana" dentro de tu página que muestra contenido de otro sitio.
<!-- Video con controles -->
<video src="intro.mp4" controls width="640" height="360">
Tu navegador no soporta video HTML5.
</video>
<!-- Video con múltiples formatos -->
<video controls poster="portada.jpg" width="640">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
<!-- Audio -->
<audio src="musica.mp3" controls>
Tu navegador no soporta audio HTML5.
</audio>
<!-- Iframe: video de YouTube -->
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
width="560" height="315"
title="Título del video"
allowfullscreen
></iframe>
<!-- Iframe: mapa de Google -->
<iframe
src="https://maps.google.com/maps?q=lugar&output=embed"
width="600" height="400"
title="Mapa de ubicación"
></iframe>
Consejo🎬 El atributo poster en <video> muestra una imagen de portada antes de que el usuario presione play. Siempre agrega title a los iframes para accesibilidad.
Practica esta lección
Resuelve los ejercicios del curso de HTML & CSS en la app, gratis y con corrección automática.
Empezar a practicar