Учебник HTML. Глава 11: Аудио и видео

Узнайте, как добавить аудио и видео на веб-страницу с помощью HTML-тегов. Подробные примеры помогут освоить основы встраивания мультимедийного контента.

<< Учебник HTML

11.1. Вставка аудиоролика

Для вставки аудиофайла используется тег <audio>. Вот пример простого использования этого тега:

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    Ваш браузер не поддерживает тег audio.
</audio>

Комментарий к коду:

• controls – этот атрибут добавляет элементы управления воспроизведением (кнопка Play/Pause, ползунок громкости и т.п.).
• Внутри тега <audio> находится тег <source>, который указывает путь к аудиофайлу (src) и его формат (type).
• Текст внутри тега <audio> будет отображаться, если браузер не поддерживает данный тег.

11.2. Вставка видеоролика

Тег <video> используется для добавления видеофайлов на страницу. Вот простой пример:

<video width="640" height="360" controls>
    <source src="movie.mp4" type="video/mp4">
    Ваш браузер не поддерживает тег video.
</video>

Комментарий к коду:

• Атрибуты width и height задают размеры видео.
• Как и в случае с аудио, элемент <source> указывает путь к файлу и его тип.
• Текст внутри тега <video> будет виден, если браузер не поддерживает данный тег.

11.3. Указание нескольких источников аудио или видео

Иногда необходимо указать несколько форматов файла, чтобы обеспечить совместимость с разными браузерами. Для этого можно использовать несколько тегов <source>.

Пример для аудио:

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type="audio/ogg">
    Ваш браузер не поддерживает тег audio.
</audio>

Пример для видео:

<video width="640" height="360" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    Ваш браузер не поддерживает тег video.
</video>

Комментарий к коду:

• Браузеры будут пытаться воспроизвести файл из первого источника, а если он не поддерживается, перейдут ко второму источнику.

11.4. Тег track

Тег <track> позволяет добавлять субтитры или другие текстовые дорожки к видео. Например, вы можете добавить русские субтитры к вашему ролику:

<video width="640" height="360" controls>
    <source src="movie.mp4" type="video/mp4">
    <track src="subtitles.vtt" kind="subtitles" srclang="ru" label="Русский">
    Ваш браузер не поддерживает тег video.
</video>

Комментарий к коду:

• Атрибут kind определяет тип трека (субтитры, главы и т.д.).
• srclang задает язык текста.
• label – это название трека, которое будет видно пользователям при выборе языка субтитров.

---