Как подгружать видео последовательно?

Привет всем.

Есть проект на Vue.js, в котором есть тяжелая главная страница, котрая должна прогрузиться в следующей последовательности:

Шаг 1. Preloaded от 0 до 100%
Шаг 2. Превью экран с видео (1 мб) на background
Шаг 3. Основная страница с видео (3 мб) на background

Механика загрузки такая:

Этап 1. Появляется прелоадер, который грузит видео из шага 1 на 100% и видео из шага 2 на 50%
Этап 2. После окончания данного этапа, запускается шаг 2 и видео из шага 3 должно продолжить загружаться, но пользователь может нажать на кнопку на шаге 2 и пропустить шаг 2
Этап 3. После этапа 2 появляется весь контент и видео должно быть уже загружено на 50+%, чтобы не было рывков, подгрузок и т.д.

Помогите решить проблему. Так как пользоваться проектом будут люди с slow 3g тоже.

Всем заранее спасибо.