Вступление

Итак, давайте разбираться. Тег video на самом деле очень прост, но все же имеет пару нюансов в использовании. Чтобы создать видео - используем специальный тег

<video>
  <source src="path_to_video" type="video/mp4">
</video>

В теге source используем атрибуты src и type для собственно самого видео-файла и его расширения. Хотя в целом можно и убрать source и написать src прямо у тега video – рекомендуется именно использовать source. Причем, если имеются несколько форматов – используют несколько source.

атрибуты

У тега video есть ряд полезных атрибутов, которые нужно знать:

  1. controls - если задать этот атрибут – появятся элементы управления видео.
  2. poster – это простая возможность повесить на видео картинку, если нужно долго ждать загрузки.
  3. autoplay – думаю из названия ясно, нужен для того чтобы сразу запустить видео.
  4. loop – для постоянного повторения видео.

Вы можете использовать их все, и получится что-то вроде:

<video>
  <source src="path_to_video" controls autoplay poster="path_to_image" loop type="video/mp4">
</video>

Как видите, большинство атрибутов булевые, то есть не требующие значения для своей работы. Есть еще парочка атрибутов, но о них я расскажу в нюансах.

Нюансы

Итак, первый нюанс – загрузка видео со звуком. Дело в том, что браузеры запрещают автоплей видео со звуком. Либо выкидывают ошибку в консоль, либо просто отказываются грузить видео. Это нужно знать и учитывать, обсуждая с заказчиком видео на странице.

Просто примите это, так нельзя. Поэтому если нужно видео с автоплеем – не забывайте атрибут muted.

Второй нюанс заключается в использовании атрибута preload. У него три значения:

  1. none – видео вообще не загрузится
  2. auto – значение по умолчанию, видео будет грузиться
  3. metadata – загрузятся первые секунды видео и всякая мета-информация.

Какой использовать в той или иной ситуации решать вам, лично я у себя на сайте я поставил metadata, т.к. мне так удобно. Но если вам не нужно вообще нагружать сеть при загрузке странице - используйте none.

В общем-то и все. Тема простая, но тем не менее многие просили о ней сказать. Видео по теме в самом верху статьи, а исходники на код из видео – по ссылке.

Удачи!