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 корректно обрабатывается большинством браузеров. По возможности используйте именно его

Как с вами связаться? 🙃

Команда проекта находится в телеграм-сообществе. Там можно задать любой вопрос и повлиять на проект

Упражнение не проходит проверку — что делать? 😶

В моей среде код работает, а здесь нет 🤨

Мой код отличается от решения учителя 🤔

Прочитал урок — ничего не понятно 🙄

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются

HTML: Видео

<video src="https://example.com/our-video.mp4" controls></video>

<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>

Тег <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

← ПредыдущийСледующий →