Видео с альфа-прозрачностью на веб-страницах
Джейк Арчибальд задался вопросом, как эффективнее всего вставлять на веб-страницы видео, у которых есть прозрачный фон. Для всяких промо такое иногда нужно. И сделал интересные выводы.
- AVIF не подходит. Он умеет в анимации и прозрачность, под капотом использует видеокодек AV1, но Safari прозрачность не поддерживает, а использовать
- VP9 и HEVC уже лучше. Но на момент написания статьи в Chrome для Android был баг с прозрачностью, а в Firefox на Android часто останавливается воспроизведение.
- Собрать видео двойной высоты, где верхняя половина — видео, а нижняя половина — маска для видео, а потом при помощи WebGL маскировать одно другим. Вот такой подход у Джейка сработал везде, где нужно.
Чтобы вам не писать шейдеры самостоятельно, Джейк собрал веб-компонент, который берёт рендеринг на себя. И в статье приложил инструкцию, какие настройки применять в
https://jakearchibald.com/2024/video-with-transparency/
Джейк Арчибальд задался вопросом, как эффективнее всего вставлять на веб-страницы видео, у которых есть прозрачный фон. Для всяких промо такое иногда нужно. И сделал интересные выводы.
- AVIF не подходит. Он умеет в анимации и прозрачность, под капотом использует видеокодек AV1, но Safari прозрачность не поддерживает, а использовать
img для воспроизведения видео в принципе не самый правильный подход, потому что браузеры обрабатывают анимации по-другому.- VP9 и HEVC уже лучше. Но на момент написания статьи в Chrome для Android был баг с прозрачностью, а в Firefox на Android часто останавливается воспроизведение.
- Собрать видео двойной высоты, где верхняя половина — видео, а нижняя половина — маска для видео, а потом при помощи WebGL маскировать одно другим. Вот такой подход у Джейка сработал везде, где нужно.
Чтобы вам не писать шейдеры самостоятельно, Джейк собрал веб-компонент, который берёт рендеринг на себя. И в статье приложил инструкцию, какие настройки применять в
ffmpeg для каждого из форматов.https://jakearchibald.com/2024/video-with-transparency/