Как оптимизировать видео, вставляемое в качестве фона?

Question

[Алексей Скляров]

Вставляю через <video> видео ролик, который будет работать как фон блока. Само видео весит 22 мб при длительности 25-30 сек. Как происходит подгрузка таких роликов пользователю? С аудио, например, они сразу все скачиваются клиенту сразу. Получается что при загрузке страницы пользователь начнет еще качать целых 22 мб. Как справляются с такой задачей?

Comments

[Антон Антон]

https://habrahabr.ru/post/278655/

spoiler

[sazhyk]

Никогда не понимал этого. Я захожу на информационный сайт, получить информацию. А вместо этого, минуту жду, пока загрузится

видео ролик, который будет работать как фон блока

А уж для вставлятелей фоновой музыки отдельный котел. Дизигнеры - зло.
А по сути вопроса вам Александр Таратин очень хорошо ответил.

[hrum]

как конкретно сделано рассказать к сожалению не могу, но вот здесь много видеоблоков и работает/грузится все быстро:
https://paradoxtime.com

[Johny Smith]

sazhyk, https://habrahabr.ru/company/htmlacademy/blog/339848/ вы можете делать постепенную деградацию или прогрессивное улучшение для старых девайсов и устаревших типов соединения - но это называется даунгрейд тогда уже. Сайты должны развиваться как и всё остальное вокруг, иначе можно обойтись Pure HTML. Оптимизировать сайт надо уметь, не ходите на те сайты где этого делать не умеют, вот и всё. Спрос формирует предложения. Не будет спроса и ходить туда не будут.

Answer 1

[Александр Таратин]

Уменьшите битрейт и разрешение видео.
Переместите метаданные в начало mp4 контейнера
Установите preload="metadata"
htmlbook.ru/html/video/preload

Чтобы пиксели в глаза не бросались наложите на видео сеточку из маленьких черных точек
https://jsfiddle.net/soumyabg/wefLyrhp/
css background dotted overlay

Comments

[Dmitry Bay]

загрузите видео на ютуб, если под рукой нормального кодера нет, а потом скачайте оттуда видео.

[Сергей Коноваленко]

Александр, а как узнать метаданные в mp4 контейнере находятся в начале или в конце?

[Александр Таратин]

Сергей Коноваленко, https://gpac.wp.imt.fr/mp4box/mp4box-documentation/ Опция -inter

[Сергей Коноваленко]

Опцию -inter, так понял, нужно указывать при конвертации через MP4Box, чтобы она перенесла метаданные в начало. А если у меня вот просто видео есть, то можно без MP4Box, без конвертации, узнать только информацию о том, в начале или в конце находятся метаданные?

[Александр Таратин]

Сергей Коноваленко, Наверное есть способ, но мне не известно (открыть в hex редакторе и "на глазок" прикинуть например).
Проще запустить конвертацию (она быстрая - без перекодировки)