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>
На всякий случай сделайте звук потише, в видео есть звук ;)
Полезное
Если используется один файл, то достаточно добавить атрибут
srcдля тега<video>. В остальных случаях используйте теги<source>Формат
mp4корректно обрабатывается большинством браузеров. По возможности используйте именно его
Команда проекта находится в телеграм-сообществе. Там можно задать любой вопрос и повлиять на проект
Если вы зашли в тупик, то самое время поговорить с нашим асситентом Тота во вкладке "ИИ-помощник":
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи. В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в обратной связи нашего сообщества
Ваше упражнение проверяется по этим тестам
const { test } = require('tests');
test(({ query, expect }) => {
const element = query(document, 'video');
expect(element).to.have.attr('controls', '');
expect(element).to.have.attr('width', '320');
expect(element).to.have.attr('height', '240');
expect(element).to.have.attr('src', 'https://www.w3schools.com/html/movie.mp4');
});Решение учителя откроется через:
20:00
