Как правильно сменять фоновые видео один за другим?

Question

[Алексей Скляров]

Есть блок на всю ширину и высоту страницы, который является фоном и в котором находится несколько видео, которые должны сменяться:

<div class="hero-header__background">
				<div class="hero-header__background__item" id="index-bg-1">
					<video poster="images/bg.png" id="bgvid" playsinline autoplay muted loop>
						<source src="videos/index_1.mp4" type="video/mp4">
					</video>
				</div>
				<div class="hero-header__background__item" id="index-bg-2">
					<video poster="images/bg.png" id="bgvid2" playsinline autoplay muted loop>
						<source src="videos/index_2.mp4" type="video/mp4">
					</video>
				</div>
		</div>

При, допустим таком коде:

$('#index-bg-2').fadeOut('slow',function(){
  $(this).addClass('hidden');
  $('#index-bg-1').fadeIn();
});

При замене одного блока на другой на секунду видно первоначальный фон, что меня не устраивает. Я думал просто подменять атрибут src у видео, но это тоже не работает, видео как шло, так и продолжает идти. Каким способом можно грамотно заменять одно видео на другое (при клику по кнопке например), так чтобы все-таки не приходилось скрывать и раскрывать блоки, так как в этом случае, кажется мне, пользователю будут подгружаться вообще все видео, что будет сильно грузить работу?

Answer 1

[Юнус Газиев]

Алгоритм такой:
Все плееры по умолчанию на паузе кроме первого.
1м проявляется следующее видео >> после скрывается предыдущее и останавливается плеер.
И так далее.

Answer 2

[ProAI]

Некоторые вещи делаются не очевидными способами и порой в совершенно другой плоскости.
Не следует воспроизводить два видео одновременно т.к. вы создадите повышенную нагрузку на систему пользователя при воспроизведение двух видео потоков одновременно, хотя и на короткий промежуток времени, но у всех разные системы от мобильных до десктопов.
Лучшим решением является комбинация программного кода и видеомонтажа. Склейте в видеоредакторе несколько видео, между переходами от видео к видео установите затухание в какой-то из нейтральных цветов или статичное изображение с логотипом компании.
Например: Первое видео проявляется из зелёного цвета (зависит от вашего предпочтения и дизайна вашего сайта) и в конце также уходит в зелёный. Чередуйте таким образом несколько видео файлов, при этом сами переходы в видеоредакторе могут быть любые от плавного затухания до 3D, но переход должен быть именно от статичного изображения к живому видео. Длительность перехода достаточна в 1 сек. Такие действия повторите для остальных ваших видео и всё склейте в один видеофайл. Объём одного видеофайла почти всегда получается меньше чем нескольких(с теми же кадрами), так как при кодирование происходит оптимизация за счёт межкадрового кодирования.
Переходим в html, js и css. Теперь создайте контейнер с двумя слоями, на нижнем слое будет видео, а на верхнем - слой содержащий цветовую заливку (можно и изображение, например логотип) - изначально с нулевой прозрачностью. При возникновение желаемого события от пользователя (нажал на кнопку, прокрутка страницы и т.д, и т.п.) сначала плавно проявите верхний слой, сделайте задержку, затем перемотайте видео на нужную сцену (программно), вновь задержка и уведите прозрачность верхнего слоя в 0.
В принципе, при монтаже видео необязательно делать переходы в цвет достаточно и простого наложения с затуханием (cross dissolve), но это уже детали.