Держите сцену с фоновым видео, прикрепленным до тех пор, пока видео не закончит воспроизведение

Question

Во-первых, отличная библиотека! Действительно наслаждаясь использованием ScrollMagic. Фантастика!

Во-вторых, я надеюсь, что тема на этот вопрос достаточно ясен ...

То, что я пытаюсь достичь:

У меня есть сцена - на видовых полная ширина и высота - что имеет штифт , продолжительность и тронная шкала времени. Движение работает так, как должно, никаких проблем нет.

У меня также есть HTML5-видеоизображение в фоновом режиме. Это вводится в контейнер сцены при входе в сцену (при выключенном автовоспроизведении). То, что я хочу сделать, - это после того, как все мои подростки закончили, видео в фоновом режиме (fullsize of scene), чтобы играть, и со сценой, все еще прикрепленной, пока она не будет закончена.

Проблема в том, что, когда подростки закончили, и пока видео воспроизводится, сцена эффективно заканчивается, и, таким образом, штырь удаляется, и моя следующая сцена прокручивается.

Каков наилучший способ сохранить сцену, закрепленную там, пока мое видео не закончит воспроизведение? Есть ли примеры того, чего я пытаюсь достичь здесь?

Одним из направлений, которые я попытался сделать, является добавление еще одной нулевой анимации с задержкой на столько секунд, пока видео воспроизводится. Это дает некоторую фиксацию, но если пользователь продолжает прокручивать и быстро во время воспроизведения, они будут прокручиваться до следующей сцены, пока видео еще не закончено ...

Если у кого-то есть какие-то первоначальные мысли, это было бы здорово. Я возвращался назад и вперед, пытаясь придумать способ, но не может найти изящное решение.

Спасибо заранее, Craig

Answer 1

HTML 5 видео имеет onended событие, которое может вызвать, когда видео будет сделано играть.

// Disable scrolling 
vodObject.play(); 

vidObject.onended=function(){ 
    // Re-enable scrolling 
}; 

Может быть, вы можете отключить прокрутки мыши, когда начинается воспроизведение видео, а затем вновь включить его, когда видео достигает onended, используя метод, предусмотренный в этом ответе: How to disable scrolling temporarily?