<video>

Встраивает видео на страницу 📺

Одно видео в двух разных форматах и текст, который появится, если оба формата не поддерживаются браузером:

        
          
          <video controls width="250">  <source src="flower.webm" type="video/webm">  <source src="flower.mp4" type="video/mp4">  Ваш браузер не поддерживает встроенные видео :(</video>
          <video controls width="250">
  <source src="flower.webm" type="video/webm">
  <source src="flower.mp4" type="video/mp4">
  Ваш браузер не поддерживает встроенные видео :(
</video>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

Тег <video> всегда закрывается при помощи парного тега </video>.

Адрес видео задаётся внутри контейнера <video> через тег <source src="URL"> или с помощью атрибута src.

Некоторые браузеры могут не поддерживать какой-то формат. Поэтому в <video> можно добавить один и тот же файл в нескольких форматах. Это будет выглядеть так:

        
          
          <source src="my-video.mp4" type="video/mp4"><source src="my-video.webm" type="video/webm">
          <source src="my-video.mp4" type="video/mp4">
<source src="my-video.webm" type="video/webm">

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

        
          
          <video controls>  <source src="my-video.mp4" type="video/mp4">  <source src="my-video.webm" type="video/webm">  <p>    Ваш браузер не поддерживает встроенные видео. Попробуйте скачать его по    <a href="my-video.mp4">этой ссылке</a>.  </p></video>
          <video controls>
  <source src="my-video.mp4" type="video/mp4">
  <source src="my-video.webm" type="video/webm">
  <p>
    Ваш браузер не поддерживает встроенные видео. Попробуйте скачать его по
    <a href="my-video.mp4">этой ссылке</a>.
  </p>
</video>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

В атрибуте src указывается ссылка на видеофайл. Ещё ссылку можно задать через тег <source>.

• controls — добавляет стандартные элементы управления видеоплеером: кнопку воспроизведения и паузы, полосу прокрутки, уровень громкости, полноэкранный режим и другие элементы, в зависимости от браузера.
• autoplay — видео воспроизводится автоматически после загрузки страницы. Используйте автоматическое проигрывание с умом: мало кому нравится, когда что-то начинает само играть.
• loop — зацикливает воспроизведение видео, так что оно снова начинается каждый раз после завершения.
• muted — видео начнёт играть без звука, пока его не включит пользователь.
• playsinline — контролирует воспроизведение видео на мобильных устройствах. Обычно видео открывается в полноэкранном режиме, но этот атрибут позволит запретить такое поведение, оставив видео в рамках элемента.

• width — ширина видео в пикселях.
• height — высота видеоплеера в пикселях.
• poster — URL-адрес картинки, которая будет показываться, пока видео не загрузится. По сути, это обложка ролика. Если её не будет, то, пока не загрузится первый кадр, на месте видео пользователь увидит чёрный прямоугольник.

• buffered — этот атрибут собирает информацию о том, какие минуты видео уже загрузились.
• preload — подсказывает браузеру, нужно ли загружать видео или информацию о нём сразу со страницей. Без этого атрибута предварительная загрузка видео будет зависеть от настроек конкретного браузера. Есть несколько значений:
  • none — видео не загружается предварительно.
  • metadata — загружается только информация о файле, например, размер, продолжительность или обложка. Используйте этот параметр, чтобы не загружать видео, пока пользователь не захочет его посмотреть.
  • auto — видеофайл загружается со страницей, чтобы пользователь мог сразу начать смотреть его. Если не указывать никакое значение preload, то атрибут будет работать как auto. Учтите, что если стоит атрибут autoplay, то preload не работает.

💡 Если не указать атрибут controls, то браузер не будет показывать стандартные элементы управления видеоплеером. Создать свои элементы управления можно с помощью JavaScript.

💡 Используйте CSS-свойство object-position, чтобы настроить расположение видео внутри элемента, а также object-fit, чтобы настроить размер видео относительно элемента.

💡 Атрибут preload носит рекомендательный характер для браузера: будет ли видео предварительно загружено, зависит от настроек конкретного браузера.

💡 Высоту height и ширину width видеоплеера лучше задавать через CSS. По умолчанию эти параметры будут такими, как у видео, которое вы встраиваете.

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

        
          
          <video controls src="frontend.mp4" poster="frontend.jpg" width="580">  Простите, но ваш браузер не поддерживает встроенные видео.  Попробуйте скачать видео <a href="frontend.mp4">по этой ссылке</a>  и открыть его на своём устройстве.</video>
          <video controls src="frontend.mp4" poster="frontend.jpg" width="580">
  Простите, но ваш браузер не поддерживает встроенные видео.
  Попробуйте скачать видео <a href="frontend.mp4">по этой ссылке</a>
  и открыть его на своём устройстве.
</video>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

А теперь добавим несколько форматов одного видео. Браузер попробует воспроизвести первый из поддерживаемых им форматов: сначала попробует проиграть MP4, потом OGG, затем AVI. Если встроенные видео вообще не поддерживаются, то появится соответствующее сообщение:

        
          
          <video width="580" controls poster="cinema-vs-reality.jpg">  <source src="cinema-vs-reality.mp4" type="video/mp4">  <source src="cinema-vs-reality.ogv" type="video/ogg">  <source src="cinema-vs-reality.avi" type="video/avi">  Ваш браузер не поддерживает встроенные видео.</video>
          <video width="580" controls poster="cinema-vs-reality.jpg">
  <source src="cinema-vs-reality.mp4" type="video/mp4">
  <source src="cinema-vs-reality.ogv" type="video/ogg">
  <source src="cinema-vs-reality.avi" type="video/avi">
  Ваш браузер не поддерживает встроенные видео.
</video>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          <video autoplay muted loop class="background-video">  <source src="storm.mp4" type="video/mp4"></video><div class="content">  <h1>Банановый эквивалент</h1>  <p>Мы живём в радиоактивном мире. Это нормально?</p></div>
          <video autoplay muted loop class="background-video">
  <source src="storm.mp4" type="video/mp4">
</video>
<div class="content">
  <h1>Банановый эквивалент</h1>
  <p>Мы живём в радиоактивном мире. Это нормально?</p>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .background-video {  position: absolute;  right: 0;  bottom: 0;  min-width: 100%;  min-height: 100%;}.content {  position: absolute;  top: 0;  bottom: 0;  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;  background: rgba(0, 0, 0, 0.5);  color: #f1f1f1;  width: 100%;  padding: 20px;}
          .background-video {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

.content {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать