DevGang
Авторизоваться

HTML-видео — как встроить видеоплеер с тегом HTML 5 Video 

До появления HTML 5 веб-разработчикам приходилось вставлять видео на веб-страницу с помощью подключаемого модуля, такого как Adobe Flash Player.

Сегодня вы можете легко вставлять видео в HTML-документ с помощью тега <video>.

В этой статье мы увидим, как этот тег <video> работает в HTML.

Базовый синтаксис

Так же, как и тег <img><video>принимает атрибут src, с помощью которого нужно указать источник видео.

<video src="weekend.mp4"></video>

По умолчанию он отображается как изображение в браузере:

Этот CSS центрирует все на веб-странице и меняет цвет фона:

body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

Кроме того, вы можете указать несколько источников видео для <video> с помощью тега <source>. Этот тег <source> также должен иметь собственный атрибут src.

Вы можете использовать несколько тегов <source>, чтобы сделать доступными разные форматы одного и того же видео. Затем браузер будет воспроизводить формат, который он поддерживает.

<video controls>
   <source src="weekend.mp4" />
   <source src="weekend.ogg" />
   <source src="weekend .webm" />
</video>

Атрибуты тега video

Тег <video> поддерживает глобальные атрибуты, такие как idclassstyle и т. д.

Если вам интересно, что такое глобальные атрибуты, это атрибуты, поддерживаемые всеми тегами HTML.

Конкретные атрибуты, поддерживаемые тегом <video>, включают srcpostercontrolsloopautoplaywidthheightmutedpreload, и другие.

Атрибут src

Атрибут src используется для указания источника видео. Это может быть относительный путь к видео на вашем локальном компьютере или ссылка на живое видео из Интернета.

<video src="weekend.mp4"></video>

Это необязательно, потому что вы можете использовать тег <source> вместо него.

Атрибут poster

С помощью атрибута poster вы можете добавить изображение, которое будет отображаться до начала воспроизведения видео или во время его загрузки.

<video src="weekend.mp4" poster="benefits-of-coding.jpg"></video>

Вместо изображения первой сцены видео браузер покажет это изображение:

Атрибут controls

Когда вы используете элемент control, он позволяет браузеру отображать контроллеры воспроизведения, такие как воспроизведение и пауза, громкость, поиск и т. д.

<video
      controls
      src="weekend.mp4"
      poster="benefits-of-coding.jpg"
></video>

Атрибут loop

С помощью атрибута loop вы можете автоматически повторять видео. То есть заставлять его воспроизводиться снова каждый раз, когда оно прекращает воспроизведение.

<video
      controls
      loop
      src="weekend.mp4"
      poster="benefits-of-coding.jpg"
></video>

Атрибут autoplay

Атрибут autoplay позволяет настроить автоматическое воспроизведение видео сразу после загрузки страницы.

<video
      controls
      loop
      autoplay
      src="weekend.mp4"
      poster="benefits-of-coding.jpg"
></video>

Атрибуты width и height

Вы можете использовать атрибуты width и height, чтобы указать ширину и высоту видео в пикселях. Он принимает только абсолютные значения, например, пиксели.

<video
      controls
      loop
      autoplay
      src="weekend.mp4"
      width="350px"
      height="250px"
      poster="benefits-of-coding.jpg"
></video>

Атрибут muted

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

<video
      controls
      loop
      autoplay
      muted
      src="weekend.mp4"
      width="350px"
      height="250px"
      poster="benefits-of-coding.jpg"
></video>

Если атрибут controls указан, пользователь может нажать кнопку громкости, чтобы включить звук.

Атрибут preload

С помощью атрибута preload вы можете подсказать браузеру, следует ли загружать видео при загрузке страницы.

Этот атрибут имеет решающее значение для взаимодействия с пользователем.

Вы можете использовать 3 значения с атрибутом предварительной загрузки:

  • none: указывает, что видео не будет загружаться, пока пользователь не нажмет кнопку воспроизведения.
  • auto: указывает, что видео должно загружаться, даже если пользователь не нажимает кнопку воспроизведения.
  • metadata: указывает, что браузер должен собирать метаданные, такие как длина, размер, продолжительность и т. д.
<video
      controls
      loop
      autoplay
      muted="true"
      preload="metadata"
      src="weekend.mp4"
      width="350px"
      height="250px"
      poster="benefits-of-coding.jpg"
></video>

Вывод

В этой статье вы узнали о теге HTML5 <video> и его атрибутах, чтобы правильно использовать его в своих проектах.

Поскольку звук является важной частью полного видео, вы также можете использовать тег <video> для размещения аудиофайла на веб-странице. Но в большинстве случаев вы должны использовать тег <audio> для этой цели для соответствующего взаимодействия с пользователем.

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

Источник:

#HTML
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

Vladimir Shaitan - Видео блог о frontend разработке и не только

Посмотреть