javascript — Parallax.js — самый производительный формат видео для многократного зацикливания видео?

Parallax.js — самый производительный формат видео для многократного зацикливания видео?

У меня есть около 6 видео, которые я хочу использовать для прокрутки параллакса.

  • Каждое из этих 6 видео должно быть заменено двумя другими версиями того же видео в зависимости от взаимодействия с пользователем.
  • Эти видео примерно 1080p и не более 5 секунд каждый.

Что я пробовал …

Сначала я попробовал 6 png с альфа-каналом. Тот же размер, что и видео. Это не отставало.

Далее я пошел на видео. В идеале мне нужен был альфа-канал, поэтому я попробовал все 6 вебм, играющих одновременно. Это привело к значительному отставанию.

Я попробовал mp4. Подобные лаги. Только Webm около 800 КБ каждый — не большой.

Ниже мой код: (я использую parallax.js для эффекта параллакса)

 {amp}lt;video data-depth="0.15" poster = "../src/images/title-new.png" autoplay muted loop{amp}gt; {amp}lt;source src="../src/images/glitch.mp4" type="video/mp4"{amp}gt; {amp}lt;/video{amp}gt; 

Для каждого из 6. Я проводил аудит производительности с помощью инструментов Chrome, и мне было рекомендовано перейти с png на jpeg — тестирование с производительностью jpeg может быть немного увеличено, но все же не так хорошо, как это было, когда это были просто pngs.

Вопрос:
Как лучше всего показывать несколько видео, чей src будет часто меняться? Webm хуже чем mp4? Имеет ли значение изображение плаката?

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector