<!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>