Видео

Так же, как и с аудио, ранее в HTML разметку нельзя было «комфортно» вставить видео файл. Начиная с HTML5 появился элемент video, который, как и audio позволяет быстро добавить необходимое видео на страницу.

Тег video парный, в котором, при отсутствии вложенных тегов source указывается путь к видео файлу в атрибуте src. Так же с помощью атрибута controls можно вывести элементы управления для проигрывателя. Стилистика элементов зависит от конкретного браузера.

<video src="our-video.mp4" controls></video>

С помощью специальных тегов source возможно добавлять несколько форматов видео. Это необходимо по причине того, что каждый браузер умеет воспроизводить только определённые форматы видео. Единственным форматом, который обрабатывают все браузеры — mp4

<video controls>
    <source src="our-video.mp4" type="video/mp4">
    <source src="our-video.webm" type="video/webm">
    <source src="our-video.ogg" type="video/ogg">
</video>

Наличие трёх форматов файлов гарантирует работоспособность видео на любых устройствах. Также обязательным является наличие атрибута type, который сообщит браузеру формат видео, которое используется в данном source.

Тег video имеет несколько важных атрибутов:

  • controls — Добавляет элементы управления для видеоплеера.
  • autoplay — Автоматическое воспроизведение после загрузки видео.
  • width — Ширина видеоплеера.
  • height — Высота видеоплеера.

Задание

Добавьте видео в формате mp4 на страницу:

  • Ссылка на видео: https://www.w3schools.com/html/movie.mp4
  • У видеоплеера должны быть элементы управления
  • Высота плеера: 240
  • Ширина плеера: 320
  • Путь к файлу укажите в теге video

Нашли ошибку? Есть что добавить? Пулреквесты приветствуютсяhttps://github.com/hexlet-basics

Упражнение доступно только авторизованным пользователям.

Пожалуйста, авторизуйтесь, это необходимо для отслеживания прогресса выполнения уроков. Если у вас ещё нет учётной записи, то сейчас самое время создать аккаунт.