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>