Встраивай звук, видео и иллюстрации с подписями без единого плагина.
Открыть этот урок в KodokonHTML воспроизводит аудио и видео нативно: внешний плеер не нужен. Реальные примеры: выпуск подкаста в блоге, демонстрация продукта на лендинге, обучающее видео внутри документации. Посмотрим, как сделать это грамотно.
<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>Три профессиональных вывода. Элементы source перебираются по порядку: браузер играет первый, который может декодировать. Атрибут poster показывает картинку-заставку до начала воспроизведения. И наконец, track добавляет субтитры в формате WebVTT: обязательно для доступности и очень ценно при просмотре без звука.
<audio controls preload="metadata">
<source src="podcast-ep12.mp3" type="audio/mpeg">
<a href="podcast-ep12.mp3">Download the episode</a>
</audio>Чтобы проиллюстрировать содержимое, figure связывает медиаэлемент с его подписью через figcaption. И не только изображения: график, фрагмент кода или цитата тоже хорошие кандидаты. Подпись связана с фигурой программно, чего обычный абзац под картинкой предложить не может.
<figure>
<img src="chart-sales.png"
alt="Sales up 12% in Q2 2026">
<figcaption>
Sales trend, second quarter of 2026.
</figcaption>
</figure>