Интерактивная видеопрезентация для сайта

Интерактивная видео-презентация

Есть очень нестандартная специфическая задача.

Необходимо сделать на странице сайта интерактивную видео-презентацию. Есть набор видео-файлов (или секвенций картинок) проигрывание которых нужно включать кнопками.

В файле ALLinONE.mp4 собраны все видео в один для наглядности.

Это только часть всей видео-презентации, если сделать это то и с остальным проблем не возникнет - там все по аналогии.

ЗАДАЧА1

Структура данного промежутка презентации:

1. запускаем презентацию

2. видим статичный кадр AE_screen_PD_to_SH\AE_screen_PD_to_SH_00000.png и кнопку "вперед"

3. нажимаем кнопку "вперед" - проигрывается секвенция AE_screen_PD_to_SH

4. после чего автоматически запускаются две секвенции наложенные одна на другую:

    - AE_screen_SH01_mg_af - это показываемый объект на прозрачном фоне

    - AE_screen_SH_mg_bk - это бэкграунд (он всегда один для всех объектов)

   и появляются кнопки:

    - "назад" (это возврат к пункту 2)

    - "SH01" (кнопка серая, не функциональная так как мы в данный момент на этом объекте)

    - "SH02" (переход к объекту 2)

    - "SH03" (переход к объекту 2)

5. видео пункта 4 цыклично, проигрывается по кругу пока мы не нажмем любую из трех кнопок, при нажатии на любуй кнопку сразу переходим к действию не дожидаясь окончания проигрывания видеоцикла

6. при нажатии кнопки "SH02" запускаются три секвенции наложенные одна на другую:

    - AE_screen_SH01_fr_af - видео отлета от первого объекта (объект на прозрачном фоне)

    - AE_screen_SH02_to_af - видео прилета ко второму объекту (объект на прозрачном фоне)

    - AE_screen_SH_fr_to_bk - видео бэкграунда перелета от одного объекта к другому

   с кнопкой "SH03" все аналогично только вместо прилета к SH02 (AE_screen_SH02_to_af) читается секвенция прилета к SH03 (AE_screen_SH03_to_af)

7. после все снова по аналогии с пунктом 4 только вместо AE_screen_SH01_mg_af читается AE_screen_SH02_mg_af для второго объекта или AE_screen_SH03_mg_af для третьего соответственно

ЗАДАЧА2

Что нужно сделать в первую очередь (это главная задача без решения которой дальше двигаться не имеет смысла):

Взять любую из секвенций начинающихся на AE_screen_SH03_mg_af (есть в форматах .jpg .png .mp4 а также альфа-каналы отдельно) и совместить ее с любым начинающимся на AE_screen_SH_mg_bk (тоже есть во всех форматах).

Секвенции есть в разрешении как в 1920х1080 так и 1280х720. Но желательно добиться нормального результата при большем разрешении.

Добиться синхоронности воспроизведения, и плавности - все должно проигрываться со скоростью 25 кадров/сек, и без пропусков и потерь.

Что делали мы и что вышло:

Делали при помощи стандартных функций HTML CANVAS JS.

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

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

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

Архив с материалами здесь (пробелы убрать): ex . ua / 609 494 106 308

Кто считает что справится можете попробовать реализовать ЗАДАЧУ2, я ее оплачу и продолжим работу уже над основной частью.

Если есть вопросы, пишите в обсуждениях.

UPD:

50 $ оплачиваю за ЗАДАЧУ 2 в случае успешной реализации, т.е. если получится добиться плавной работы двух видео или секвенци наложенных одна на другую. 

+ если получится сделать мгновенное переключение цветов объекта в процессе проигрывания как описано в пункте 4, 

за саму презентацию - т.е. проигрывается SH01_mg_af на фоне SH_mg_bk, нажимаем кнопку и SH01_mg_af меняется на SH02_mg_af в момент нажатия и продолжает проигрываться с того же момента

За всю видеопрезентацию само собой бюджет будет абсолютно иной, но нет толку браться за все сразу если не сможете реализовать основу.

UPD2:

просьба не беспокоить предоплатчиков и тех кто не может справиться с поставленной задачей

UPD3:

ссылка на архив битая, и после перезалива работает всего несколько часов, так что пишите в скайп: sergey_rud