Audio y Video Nativo HTML5
Aprende a reproducir medios sin plugins externos mediante <video> y <audio>, agregando controles, portadas, subtítulos y compatibilidad multiplataforma.
La Era Multimedia de HTML5
Antes de HTML5, reproducir un video o un archivo de música en un sitio web requería complementos externos pesados y con brechas de seguridad (como Adobe Flash Player). HTML5 introdujo las etiquetas nativas <video> y <audio>, soportadas universalmente por todos los navegadores modernos.
El Elemento <video> y sus Atributos
<video width="640" height="360" controls poster="portada.jpg" preload="metadata">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Tu navegador no soporta reproducción de video HTML5.
</video>| Atributo | Función |
|---|---|
controls |
Muestra la barra nativa de reproducción: botón play/pausa, barra de progreso, volumen y pantalla completa. |
poster="url.jpg" |
Especifica una imagen de vista previa que se muestra mientras el video se descarga o antes de que el usuario presione play. |
autoplay |
Inicia la reproducción automáticamente al cargar la página. Nota: Los navegadores modernos bloquean el autoplay con audio; para que funcione debe acompañarse obligatoriamente de muted. |
muted |
Inicia el video silenciado por defecto. |
loop |
Reinicia la reproducción automáticamente en un bucle infinito al terminar. |
<track> |
Permite insertar pistas de subtítulos, subtítulos para sordos (CC) o descripciones en formato estándar WebVTT (.vtt). |
El Elemento <audio>
Funciona de manera idéntica a <video> pero para archivos de sonido, podcasts o música:
<audio controls>
<source src="podcast.mp3" type="audio/mpeg">
<source src="podcast.ogg" type="audio/ogg">
Tu navegador no soporta el elemento de audio.
</audio>⚡ Reproductor de Video y Audio Nativo
Prueba los controles nativos de reproducción multimedia sin necesidad de librerías externas:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Multimedia en HTML5</title>
<style>
body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
.card-media { max-width: 540px; background: white; border: 1px solid #cbd5e1; border-radius: 10px; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
video, audio { width: 100%; border-radius: 8px; margin-top: 10px; }
</style>
</head>
<body>
<div class="card-media">
<h3 style="margin-top: 0; color: #0f172a;">Reproductor de Video HTML5</h3>
<p style="font-size: 0.9rem; color: #64748b;">
Video de código abierto (Big Buck Bunny) servido en formato MP4 nativo con controles:
</p>
<!-- Ejemplo con video seguro de muestra pública -->
<video controls poster="https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=600&auto=format&fit=crop&q=80">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
Tu navegador no soporta video nativo.
</video>
<h3 style="margin-top: 25px; color: #0f172a;">Reproductor de Audio</h3>
<p style="font-size: 0.9rem; color: #64748b;">Clip de sonido en formato MP3:</p>
<audio controls>
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" type="audio/mpeg">
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Tu navegador no soporta audio nativo.
</audio>
</div>
</body>
</html>¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.🚀 ¿Quieres dominar Manual Completo de HTML5 y crear proyectos reales?
Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.
🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.