Как избежать загрузки video пока оно не требуется?

Question

[Alex]

Есть js скрипт добавления нескольких video тегов (все видео сразу с display:none и preload metadata) в один контейнер div тоже с display none . Где они будут показывать по очереди.
Однако при измение JSом стиля div и одного video в display block, во кладке network браузера видно как загружаются сразу все, причем сначала все загружаются метадату (видно по размеру), а потом уже все полностью.

Как избежать такого эффекта, чтобы в итоге грузилось только нужное видео которое сейчас в display block?

Answer 1

[Олег]

Есть js скрипт добавления нескольких video тегов

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

А не добавлять костыли снаружи.

Логика всех скриптов Lazy Load основана на том, что сперва есть плейсхолдер, который заменяется на реальный контент при входе объекта в область видимости.

Answer 2

[Wispik]

Можно использовать один блок с видео и через js менять его url

Comments

[Alex]

это то понятно, вопрос именно можно ли сделать это когда в блоке сразу несколько video. Может какое то другое css свойство или атрибут video может указать браузеру что его пока не нужно грузить, чтобы первое видео не грузилось дольше и не воспроизводилось с тормозами из-за загрузки других.

Answer 3

[Антон Усачев]

Хабр