Как вставить видео в HTML — на примерах

Видео материалы на сайте всегда делают сайт более интересным и привлекательным для пользователей, именно по этому мы рассмотрим как вставить видео в html формате. Рассмотрим как вставить видео файл находящийся у вас на хостинге/сервере, так и видео с youtube. А также, мы уже рассказывали как вставить аудио в html на своем сайте.

Как вставить видео в HTML через теги

Данный код вставляет видео с помощью html тега <video>, в котором мы поставим атрибуты:

width — задает ширину видеоплеера.
height — задает высоту видеоплеера.
controls — отображает инструменты управления видеоплеером.

<video width="640" height="360" controls>
  <source src="/assets/video/video.mp4" type="video/mp4">
  Ваш браузер не поддерживает тег video.
</video>

Внутри тега <video> обязательно нужно поставить одиночный тег <source> со следующими атрибутами:

src — указывает путь к самому видео файлу.
type — указывает тип видео файла.

Поддерживаемые html форматы видео

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

<video width="640" height="360" controls>
  <source src="/assets/video/video.mp4" type="video/mp4">
  <source src="/assets/video/video.webm" type="video/webm">
  <source src="/assets/video/video.ogv" type="video/ogg">
  Ваш браузер не поддерживает тег видео.
</video>

Обычно используют три формата видео файлов для воспроизведения в стандартном html плеере: mp4, webm и ogv.

Полезные атрибуты html тега video

Атрибуты необходимы под разные задачи, например, для обложки плеера или автозапуск плеера.

autoplay — воспроизводит видео сразу при загрузке страницы.
loop — зацикливание воспроизведения видео после его окончания.
poster=»image.jpg» — задает превью обложку видео до того как видео будет включено.
muted — звук по умолчанию выключен.

<video width="640" height="360" controls autoplay loop muted poster="/assets/images/video-preview.jpg">
  <source src="/assets/video/video.mp4" type="video/mp4">
  <source src="/assets/video/video.webm" type="video/webm">
  <source src="/assets/video/video.ogv" type="video/ogg">
  Ваш браузер не поддерживает тег видео.
</video>

Как вставить видео на сайт с YouTube

Видео с youtube вставить на сайт довольно просто, можно просто нажать на плеер youtube правой кнопкой мыши и выбрать в контекстном меню «Копировать html код». Затем просто разместить этот код в нужной вам странице сайта. Код будет примерно такой:

<iframe width="640" height="360" 
src="https://www.youtube.com/embed/VIDEO_ID" 
title="YouTube video player" 
frameborder="0" 
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
allowfullscreen>
</iframe>

Там где есть атрибут src тега <frame>, вставляется URL Самого видео которое нужно воспроизвести в данном плеере.

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