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