Видео-фон не замедляет загрузку сайта? Ещё, возможно, странный вопрос, но можно ли как-то учитывать скорость клиента и на основе этого менять html, что надо гуглить? Например, у посетителя медленное соединение - ставим картинку на фон, быстрое соединение - видео.
Краткий ответ: сильно не замедляет, но есть нюансы
Подробный ответ: для загрузки видео браузеры используют протокол HLS (HTTP Live Streaming) — весь видеопоток разбивается на небольшие «кусочки», которые затем скачиваются при помощи последовательных запросов к серверу. Этот процесс происходит независимо от загрузки других ресурсов, поэтому для небольших видео общая скорость загрузки страницы не должна заметно пострадать.
Однако, нужно учитывать, что на устройстве пользователя может не поддерживаться аппаратное ускорение для выбранного кодека видео, и декодирование будет происходить на процессоре, а не видеокарте — возможно заметное «проседание» FPS при загрузке страницы, особенно если она нагружена другими ресурсами (скриптами, которые обрабатываются в основном потоке браузера, изображениями и т.д.)
Поэтому для фоновых видео, которые сразу не видны при загрузке страницы, разумнее использовать «отложенную» загрузку, как, например, показано в этой статье (https://web.dev/lazy-loading-video/). Также при возможности лучше всегда кодировать видео таким образом, чтобы его moov atom был в самом начале файла (для ffmpeg это опция -movflags +faststart) — это позволит браузеру сразу получить важную информацию о видео (например, его длительность), не дожидаясь его полной загрузки.
Насчет вопроса о замене видео на статичное изображение для медленного соединения: Dmitriy Zorin предложил хороший вариант.
На мобильных устройствах (особенно слабых) лучше отказаться от видео в пользу картинок. Делать отдельные видео для телефонов может быть накладно, да и смысла в них там большого нет, хотя все зависит от потребностей и дизайна
Видео-фон не замедляет загрузку сайта?
Ещё, возможно, странный вопрос, но можно ли как-то учитывать скорость клиента и на основе этого менять html, что надо гуглить? Например, у посетителя медленное соединение - ставим картинку на фон, быстрое соединение - видео.
Краткий ответ: сильно не замедляет, но есть нюансы
Подробный ответ: для загрузки видео браузеры используют протокол HLS (HTTP Live Streaming) — весь видеопоток разбивается на небольшие «кусочки», которые затем скачиваются при помощи последовательных запросов к серверу. Этот процесс происходит независимо от загрузки других ресурсов, поэтому для небольших видео общая скорость загрузки страницы не должна заметно пострадать.
Однако, нужно учитывать, что на устройстве пользователя может не поддерживаться аппаратное ускорение для выбранного кодека видео, и декодирование будет происходить на процессоре, а не видеокарте — возможно заметное «проседание» FPS при загрузке страницы, особенно если она нагружена другими ресурсами (скриптами, которые обрабатываются в основном потоке браузера, изображениями и т.д.)
Поэтому для фоновых видео, которые сразу не видны при загрузке страницы, разумнее использовать «отложенную» загрузку, как, например, показано в этой статье (https://web.dev/lazy-loading-video/). Также при возможности лучше всегда кодировать видео таким образом, чтобы его moov atom был в самом начале файла (для ffmpeg это опция -movflags +faststart) — это позволит браузеру сразу получить важную информацию о видео (например, его длительность), не дожидаясь его полной загрузки.
Насчет вопроса о замене видео на статичное изображение для медленного соединения: Dmitriy Zorin предложил хороший вариант.
На мобильных устройствах (особенно слабых) лучше отказаться от видео в пользу картинок. Делать отдельные видео для телефонов может быть накладно, да и смысла в них там большого нет, хотя все зависит от потребностей и дизайна
Как вариант использовать Performance Timing API: https://developer.mozilla.org/ru/docs/Web/Performance/Navigation_and_resource_timings
И на основе данных о скорости загрузки страницы запрашивать изображение или видео.