Есть проект на 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 тоже.