Как можно реализовать видео переходы в HTML?

Question

[Михаил]

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

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

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

Comments

[gleendo]

переход на страницу за счёт соответствующего видео

что? это как?

[Михаил]

iamevg_: Представьте две страницы -- Страница1.html и Страница2.html.

По ссылке на первой странице попадаем на страницу вторую.

Страница1.html --> Страница2.html. Происходит самый простой переход с одной страницы на другую.

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

Вот например сайт: https://jardins-poudriere.ch

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

[gleendo]

Михаил: Так бы и писали в вопросе изначально.
Смотрите если страница не загрузилась, то показывайте видео, как только страница загрузится, убирайте видео.
javascript.info/onload-ondomcontentloaded

Answer 1

[Максим Тимофеев]

происходил переход на страницу за счёт соответствующего видео

переход между страницами происходит за счет отправки запроса на сервер и обработки ответа браузером. Как Вы планируете сделать это за счет видео - не понятно и требует пояснений. Ибо такими технологиями мы не владеем.

Если Вы планируете менять url видео в зависимости от ряда условий, то советую менять ulr видио методами, доступными при тех или иных условиях. Например с помощью js или формируя url видео на сервере использую выбранный язык программирования.

Comments

[Михаил]

Вот например сайт: https://jardins-poudriere.ch

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

[Максим Тимофеев]

Михаил: можно, используя js. По наступлению какого-то события, допустим клика по ссылки с каким-то классом, запускать видео или менять url видео и запускать. Но Вы должны понимать, что видео требует загрузки и весит не мало. А значит добиться такой же скорости реакции, как у анимации будет сложно.
В вашем примере используют svg анимацию и это очень правильно. Советую Вам тоже смотреть в сторону svg анимации, а не видео. Ибо видео для перехода не годится, это будет "сделал клик, подождал, пока отразится проигрыватель и запустится видео" будет плохо.

[Михаил]

Максим Тимофеев: Проект планируется не для интернета, а для локального размещения. Поэтому, наверное (наверное) проблем с загрузкой видео не возникнет. Или могут возникнуть?

[Максим Тимофеев]

Проект планируется не для интернета, а для локального размещения

А Вы думаете локально браузер работает иначе? Все равно рендер видео плеера и анимации svg это разные штуки.
Так что затея Ваша сомнительна. Можете попробовать, но не питайте надежд, что все это будет хорошо работать. Конечно надо еще понимать, какого размера видео, в каком формате, какой плеер и т.д.