Сайт с видео на фоне

Начиная свою карьеру Web-программистом, столкнулся с задачей разместить видео на фоне сайта, да так, чтобы оно прокручивалось в соответствии с положением ползунка. Задание звучало примерно так: если пользователь листает вниз, то видео проигрывается вперед, если прокручивается вверх, то видео проигрывается в обратном порядке, когда прокрутка останавливается, то и и воспроизведение останавливается.

Сперва я пытался соорудить нечто на основе тега <video> что было плохой идеей, потому что всё жутко тормозило, а обработать изменение направления просто не возможно и сперва сделал это путем использованием двух роликов одинаковых по содержанию, но различных по направлению воспроизведению. А всё потому, что браузеры не могут воспроизвести в обратном порядке. В  итоге всё это жестоко прыгало, одно видео постоянно выскакивало поверх другого и я уже не говорю про тормоза при воспроизведении.  Что уж говорить об отзывчивости на скорость прокрутки! Ведь идеальным вариантом было бы жесткая привязка воспроизведения к движению ползунка прокрутки.  запрограммировать логику наверно возможно но безумно сложно.

Позже мне показали пример сайта где подобная фишка была реализована. И вот, приступив к изучению аналога меня осенило, что подход вкорне неверен!

<canvas> — Вот что мне нужно было. Заменяем видео на последовательность изображений.  На этом этапе мне пришлось немного погуглить и я нашел отличный сервис для этого: on-line конвертер видео в изображения. Он бесплатный до тех пор, пока ваше видео не превышает 100МБт. Лучше выбрать максимальное качество, потому что результат другого качества меня не устроил, уж сильно искажались цвета близкие к черному. Попробую для этого использовать пакетную обработку в GIMP.

Технология заключается в том, что мы вставляем изображения на холст тега canvas в соответствии с положением ползунка прокрутки.

Мой HTML:

width и height очень важно указать, так как в canvas они указывают на количество пикселей в холсте. И соответственно изображение на холсте автоматически масштабируется в соответствии с указанием в CSS:

Указываем высоту и ширину в 100%, это же фон.

z-index, по той же причине, хотя конечно же не обязательно брать именно -1000.  margin указаны в -10 пикселей из-за того, что по умолчанию canvas немного отступает от краев.

С JavaScript всё немного сложней:

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

Если нам нужна мягка привязка, когда от скорости прокрутки не зависит скорость воспроизведения кадров. При таком раскладе прокрутив немного видео как бы догоняет пользователя и только потом останавливается. В этом случае код  несколько усложняется:

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

(Просмотров всего: 169, просмотров сегодня: 1)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *