Multimedia

Integra video, audio y gráficos SVG en tus páginas web.

📖

Teoría

HTML5 nativo soporta multimedia sin plugins externos:

Video con <video>:

src o <source> múltiples formatos

controls, autoplay, muted, loop, poster

Audio con <audio>:

Mismos atributos que video

SVG (Scalable Vector Graphics):

Gráficos vectoriales escalables

Se pueden escribir inline en HTML

Perfectos para íconos e ilustraciones

html

<!-- Video con múltiples formatos y controles -->
<video width="640" height="360" controls poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <p>Tu navegador no soporta video HTML5.</p>
</video>

<!-- Audio -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Tu navegador no soporta audio HTML5.
</audio>

<!-- SVG inline - un círculo -->
<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#4F8EF7" />
  <text x="50" y="55" text-anchor="middle" fill="white">SVG</text>
</svg>

⚡

Ejercicio práctico

🎯 Tu misión

Crea una página de media player que incluya: un elemento de video con controles, un elemento de audio, y un SVG que dibuje un ícono de reproducción (triángulo).

Vista previa

←Capítulo anterior

Siguiente capítulo→