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

Question

Как добавить видео на сайт, чтобы оно автоматически запускалось без пользователя, например как на сайте https://morgenshterntour.ru? Через какие ЯП это делается или это можно через верстку?

Answer 1

Атрибут autoplay - при наличии этого атрибута видео воспроизводится автоматически после загрузки страницы. Кроме этого, крайне важно также добавить и атрибут muted, иначе в некоторых браузерах автоматического воспроизведения не будет.

<video width="420" height="240" controls autoplay muted id="videoId">
  <source src="https://whatsaper.ru/wp-content/uploads/2019/05/whatsaper.ru-9-мая-день-победы.-Видео-поздравления..mp4" type="video/mp4"></video>

Answer 2

Если говорится о видео фоне то достаточно html и css и в качестве атрибутов к тегу видео добавить autoplay muted preload

Пример оформлениия видео как фона у header: https://codepen.io/topicstarter/pen/oNjpqZE

div.body {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100vw;
  min-height: 100vh;
}

video {
  display: block;
  min-width: 110vw;
  min-height: 100vh;
  position: absolute;
  top: 0px;
  left: -10px;
  object-fit: contain;
}

.play {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

<div class="body">
  <video autoplay muted preload>
   <source src="https://pictures.s3.yandex.net/landings-video/Backend.webm" type="video/mp4">
</video>
  <div class="play"></div>
</div>

БЛОГ НА HUSL

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

Ответы (2 шт):