Как и с аудио, ещё недавно в 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 на страницу:
<video>На всякий случай сделайте звук потише, в видео есть звук ;)
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Если используется один файл, то достаточно добавить атрибут src для тега <video>. В остальных случаях используйте теги <source>
Формат mp4 корректно обрабатывается большинством браузеров. По возможности используйте именно его