#cтатья дня

Возможность заменить кучу элементов интерфейса на промо-сайтах и обучающих ресурсах на видео с прозрачностью будоражит умы людей уже несколько лет.

А именно, с момента появления поддержки альфа-канала (читай, прозрачности) во всех современных видеокодеках.

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

Да, интерактивность будет минимальная, но всем и всегда ли она нужна?

В любом случае, ситуация с поддержкой до сих пор остаётся не лучшей. AVIF, будучи самым продвинутым видеокодеком, не поддеживается в Safari. Комбинация из VP9 и HEVC — вроде неплохо, но сильно больше весит и лагает на Android и в Firefox.

И тут на сцену выходит WebGL! Вот, например, стрим Юрия Артюха о добавлении альфа-канала в любое видео: https://t.me/htmlshit/2538

А вот статья Джейка Арчибальда обо всех вышеописанных проблемах с некоторыми методиками решения и FFMPEG-командами для генерации видео и текстур: https://jakearchibald.com/2024/video-with-transparency/

Выводы, впрочем, те же самые: используйте WebGL. Для чего Джейк выпустил NPM-пакет stacked-alpha-video.

Почему stacked? Потому что он предлагает сохранять текстуру альфа-канала прямо в самом видео. Получается лучше, чем кажется!

В общем, будущее тут, хотя и такое себе пока.

P. S. в некоторых случаях можно использовать и SVG-маски, об этом потом.

#video #transparency #tool