Язык 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.


comments powered by Disqus