HTML: Видео
Так же, как и с аудио, ещё недавно в HTML-разметку нельзя было «комфортно» вставить видео-файл. Начиная с HTML5 появился элемент video
, который, как и audio
, позволяет быстро добавить необходимое видео на страницу.
Тег video
парный, в котором, при отсутствии вложенных тегов source
, указывается путь к видео-файлу в атрибуте src
. Также с помощью атрибута controls
можно вывести элементы управления для проигрывателя. Стилистика элементов зависит от конкретного браузера.
<video src="https://example.com/our-video.mp4" controls></video>
С помощью специальных тегов source
возможно добавлять несколько форматов видео. Это необходимо по причине того, что каждый браузер умеет воспроизводить только определённые форматы видео. Единственный формат, который корректно обрабатывают все браузеры — mp4
.
<video controls>
<source src="https://example.com/our-video.mp4" type="video/mp4">
<source src="https://example.com/our-video.webm" type="video/webm">
<source src="https://example.com/our-video.ogg" type="video/ogg">
</video>
Наличие трёх форматов файлов гарантирует работоспособность видео на любых устройствах. Также обязательным является наличие атрибута type
, который сообщит браузеру формат видео. Именно по этому атрибуту браузер примет решение, какой файл необходимо загрузить.
Тег video
имеет несколько важных атрибутов:
* controls
— Добавляет элементы управления для видеоплеера.
* autoplay
— Автоматическое воспроизведение после загрузки видео.
* width
— Ширина видеоплеера.
* height
— Высота видеоплеера.
Атрибуты width
и height
принимают значения в пикселях, при этом указывать единицу измеренения не нужно.
<video width="500" height="500" controls>
<source src="https://example.com/our-video.mp4" type="video/mp4">
<source src="https://example.com/our-video.webm" type="video/webm">
<source src="https://example.com/our-video.ogg" type="video/ogg">
</video>
Задание
Добавьте видео в формате mp4 на страницу:
* Ссылка на видео: https://www.w3schools.com/html/movie.mp4
* У видеоплеера должны быть элементы управления
* Высота плеера: 240
* Ширина плеера: 320
* Путь к файлу укажите в теге video
Пожалуйста, авторизуйтесь, это необходимо для отслеживания прогресса выполнения уроков. Если у вас ещё нет учётной записи, то сейчас самое время создать аккаунт.