Incrusta sonido, vídeo e ilustraciones con leyenda sin ningún plugin.
Abrir esta lección en KodokonHTML reproduce audio y vídeo de forma nativa: no hace falta ningún reproductor externo. Casos de uso reales: un episodio de pódcast en un blog, una demo de producto en una landing, un tutorial incrustado en la documentación. Veamos cómo hacerlo correctamente.
<video controls width="640" poster="preview.jpg">
<source src="demo.webm" type="video/webm">
<source src="demo.mp4" type="video/mp4">
<track src="subs-fr.vtt" kind="subtitles"
srclang="fr" label="French" default>
Your browser doesn't support HTML5 video.
</video>Tres lecciones profesionales. Los elementos source se prueban en orden: el navegador reproduce el primero que puede decodificar. El atributo poster muestra una imagen de marcador de posición antes de la reproducción. Por último, track añade subtítulos en formato WebVTT: imprescindible para la accesibilidad y muy apreciado para ver el vídeo sin sonido.
<audio controls preload="metadata">
<source src="podcast-ep12.mp3" type="audio/mpeg">
<a href="podcast-ep12.mp3">Download the episode</a>
</audio>Para ilustrar contenido, figure empareja un elemento multimedia con su leyenda mediante figcaption. Y no solo imágenes: un gráfico, un fragmento de código o una cita también son buenos candidatos. La leyenda queda vinculada a la figura de forma programática, algo que un simple párrafo debajo de la imagen no puede ofrecer.
<figure>
<img src="chart-sales.png"
alt="Sales up 12% in Q2 2026">
<figcaption>
Sales trend, second quarter of 2026.
</figcaption>
</figure>