Почему html video так сильно грузит сайт?

Question

[JaPoznajuMir]

Добрый день!
Я решил на сайте вместо гифок использовать html видео. Так как оно весит в разы меньше, да и качество изображения лучше. Но столкнулся с проблемой производительности.

На странице расположено 21 видео. Оно загружается автоматически, когда появляется в поле зрения(стоят тригеры, используется библиотека Waypont.js). Видео очень маленькие - каждое длится 2 секунды и они все зациклены. После того как видео исчезает из поля зрения, оно автоматически останавливается. Но это не помогает, после воспроизведения больше 10 видео, страница начинается ужасно виснуть! Скролить ее становится невозможно!

Неужели html видео так тяжело обрабатывается браузером? Подскажите, в какую сторону копать? Ведь у того же базфида https://www.buzzfeed.com/videos - страница с видео работает отлично!

Comments

[Stepanya]

Chrome DevTools вкладка Performance
Это может найти причину тормознутости

[numfin]

На компуктере запусти эти 10 видео и поймёшь.

[Ди Ма]

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

Что-бы не создавать задержек, можно инициализировать например 2 видео наперед, что-бы замена картинки была мгновенной.

[numfin]

Ставишь у видео загрузку только poster, src у видео убирай. При наведении (mouseover) вставляй нужный src и при mouseout снова убирай

[Андрей Саныч]

если есть возможность, то покажи код или сам сайт

[JaPoznajuMir]

numfin, При удалении src, видео все равно продолжает проигрываться.

[JaPoznajuMir]

Ди Ма, Только удаления видео со страницы помогает снизить нагрузку. Но мне бы очень хотелось узнать, почему видео так сильно грузит сайт. Когда я проигрываю одновременно больше 6 роликов все начинает виснуть. Видеокарта получается отвечает за обработку изображения. Но ведь видео длится всего 1 секунду и качества как гифка. Странно все это.

[numfin]

JaPoznajuMir, Ты как его удаляешь

[JaPoznajuMir]

numfin, я пилю сайт на vue.js , так что он просто коментит видео.

[numfin]

JaPoznajuMir, :src="videourl"
videourl и ставишь на null

Answer 1

[justeen]

У меня была похожая проблема и связанна она была со скриптом Яндекс.Метрики с включенным вебвизором. Если у вас таковой есть на сайте, то пишите, помогу с решением