Речь о видео, которое необходимо разместить на сайте в виде фона, баннера, слайда карусели.
Такое видео размещается на сайте с помощью тега video. Пример:
<video preload="auto" muted playsinline autoplay="autoplay" loop="loop">
<source src="/dir/video.mp4" type="video/mp4" />
<source src="/dir/video.webm" type="video/webm" />
<source src="/dir/video.ogv" type="video/ogv" />
</video>Это один блок с несколькими форматами одного и того же видео. Воспроизведено будет лишь одно из них. Какое именно — это решает веб-браузер. Некоторые устройства и некоторые браузеры имеют очень ограниченную поддержку форматов, поэтому важно предложить несколько.
Похоже, что старые мобильные Apple-устройства умеют воспроизводить только mp4. Для подавляющего большинства остальных браузеров лучшим является webm. Поэтому, желательно хотябы эти два формата.
- mp4 — это контейнер, внутри у него оптимально использовать h.264, как наиболее популярный и компактный.
- webm — это тоже контейнер, внутри на текущий момент я выбираю vp8. Он имеет более широкую поддержку старыми браузерами, по сравнению с vp9.
Полезная табличка сравнения поддерживаемых браузерами форматов.
Самый важный параметр для всех видео — это их размер и этим определяется все остальное.
Чем меньше размер тем лучше. Но слишком маленький — это короткое видео и плохое качество. Поэтому подход индивидуален. Оценивайте исходя из того, как размещается видео, какого рода сайт, кто посетители, сколько они готовы тратить времени на ожидание загрузки, с каких устройств смотрят больше и т.д.
- 1-2 MB — быстрая загрузка, для сайтов с информацией, куда посетители обращаются, чтобы быстро получить ответ.
- 3-5 MB — приемлемый вариант для корпоративных сайтов, лендингов.
- 10-15 MB — вариант для сайтов, посетители которых точно никуда не торопятся.
Для уменьшения размера:
- Разрешение видео достаточно 1280*720.
- Длительность 10-30 секунд.
- 25 кадров в секунду или меньше.
- Звук не нужен.
На что еще стоит обратить внимание при подготовке видео:
- Видео будет закольцовано. Желательно чтобы момент перехода с конца на начало был как можно менее заметным.
- Лучше смотрятся плавные видео, особенно если речь идет о фоновом видео.
- Плавные видео лучше сжимаются, на них менее видны артэффекты от сжатия.
- Содержимое фонового видео не должно сильно отвлекать от основного контента.
- Фоновое видео должно обеспечивать хорошую контрастность для контента, который будет размещен поверх него.
- Если видео будет размещено в блоке и вы хотите показать на нем что-то важное, то лучше это было в центральной части изображения. На адаптивных сайтах блоки обычно меняют размеры, соотношения сторон. Соответственно, в разных ситуациях у видео будет частично скрыт верх-низ или левая-правая стороны.
Пример вставки видео в слайдере Bootstrap 4:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-video">
<video preload="auto" muted playsinline autoplay="autoplay" loop="loop">
<source src="/dir/video.mp4" type="video/mp4" />
<source src="/dir/video.webm" type="video/webm" />
</video>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Стилями надо обеспечить для видео-слайда нужный размер, пример в scss:
.carousel-video {
position: relative;
// height: ... или какое-то другое решение.
video {
position: absolute;
left: 0;
min-width: 100%;
min-height: 100%;
top: 50%;
transform: translateY(-50%);
}
}В Bootstrap 4 размер слайдера определяется размером используемых изображений. Соответственно для слайда с видео надо что-то придумать. Можно тупо задать высоту (пример выше). Другое решение — это например еще одно изображение, размещенное слоем, которое будет под видео. Этот вариант интересен еще и тем, что изображение будет показано, пока не загрузилось видео.