Язык HTML
Вставка звука и видео
Вставка звука. Тег <audio>
Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>.
Синтаксис:
<audio src="URL"> </audio> или
<audio>
<source src="URL1">
<source src="URL2">
<source src="URL3">
</audio>
Несколько <source src> элементов можно связать с различными файлами. Браузер будет использовать первый запускаемый формат.
Атрибуты тэга <audio>:
autoplay - звук начинает играть сразу после загрузки страницы;
controls - добавляет панель управления к аудиофайлу;
loop - повторяет воспроизведение звука с начала после его завершения;
preload - используется для загрузки файла вместе с загрузкой веб-страницы;
src - указывает путь к воспроизводимому файлу.
Закрывающий тег oбязателен.
Внутри контейнера <audio> можно написать пояснительный текст, который будет выводиться в браузерах, не работающих с этим тегом.
Управление воспроизведением аудио различается между браузерами по своему виду, но основные элементы совпадают. Это кнопка воспроизведения/паузы, длина трека, прошедшее и суммарное время звучания, а также уровень громкости.
Пример:
<audio controls>
<source src="audio/music.ogg" type="audio/ogg; codecs=vorbis">
<source src="audio/music.mp3" type="audio/mpeg">
Тег audio не поддерживается вашим браузером.
</audio>
Практическое задание:
На один из готовых проектов (стихи, биология, анатомия, геграфия...) разместить пояснительную звукозапись под заголовком проекта.
Вставка видео. Тег <video>
Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>.
Синтаксис:
<video>
<source src="URL1">
<source src="URL2">
<source src="URL3">
</video>
Несколько <source src> элементов можно связать с различными файлами. Браузер будет использовать первый запускаемый формат.
Атрибуты тэга <video>:
autoplay - видео начинает воспроизводиться автоматически после загрузки страницы;
controls - добавляет панель управления к видеоролику;
loop - повторяет воспроизведение видео с начала после его завершения;
height - задает высоту области для воспроизведения видеоролика;
width - задает ширину области для воспроизведения видеоролика;
preload - используется для загрузки видео вместе с загрузкой веб-страницы;
src - указывает путь к воспроизводимому файлу.
Закрывающий тег oбязателен.
Внутри контейнера <video> также можно написать пояснительный текст, который будет выводиться в браузерах, не работающих с этим тегом.
Атрибут controls добавляет элементы управления видео, такие как воспроизведение, пауза, и объем.
Неплохо всегда включать атрибуты ширины и высоты.
Если высота и ширина не установлена, браузер не знает размер видео. Эффект будет такой, что страница будет обновляться (или будет мерцание) в то время как видео загружается.
Пример:
<video width="400" height="300" controls="controls" poster="video/duel.jpg">
<source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'>
Тег video не поддерживается вашим браузером.
</video>
Результат примера в браузере:
Практическое задание:
В один из готовых проектов (стихи, фильмы, биология, анатомия, геграфия...) разместить подходящее видео из заготовок.
На сервисе YouTube под видео-элементами есть кнопка «Поделиться» - «HTML-код», полученный код можно вставить в любое место HTML-документа для запуска этого ролика.
Основа:
← Язык HTML. Списки. | Язык CSS. Введение. Подключение CSS к HTML. → |