Какие браузеры поддерживают прозрачный WebM?
Удаление фона – это лишь половина работы. На этой странице рассматриваются аспекты, важные для производственного процесса: какой формат использовать, какие параметры необходимо задать, и как видео с альфа-каналом работает в браузерах, которые вы не протестировали.
Источник: образец кеинга на зеленом экране.
Исходный образец · MP4 · 4 секунд · движущийся объект с плавными краями
Экспорт в формат WebM. Переключите формат экспорта, чтобы сравнить один и тот же фрагмент в формате Lottie ZIP или прозрачном GIF перед тем, как принять решение.
Попробовать этот примерПроблема
Прозрачное видео выглядит завершенным на вашем компьютере, но при загрузке в браузере посетителя может отображаться как черная рамка, белая рамка или вообще ничего. Видео с альфа-каналом – одно из последних мест в интернете, где формат определяет, будет ли ваша страница работать, и проблема может оставаться незамеченной.
Обычно советы сводятся к названию формата без оговорок. WebM с альфа-каналом воспроизводится в браузерах Chromium и Firefox, но не во всех версиях Safari. Прозрачный GIF работает повсюду, однако имеет жёсткие края и ограниченную палитру. Пакет Lottie хорошо масштабируется, но требует плеера; если он создан из видео с удалённым фоном, внутри всё равно остаются растровые кадры.
Под этим следует решение, которое обычно не принимается явно: действительно ли этот актив должен быть видео. Короткий цикл часто меньше и более четкий, если он представлен в виде Lottie или последовательности PNG, управляемой CSS, чем любой видеокодек.
Рабочий процесс браузера
Экспортируйте один и тот же фрагмент в нескольких форматах здесь и сравните реальные файлы, вместо того, чтобы выбирать из таблицы. Конвертер работает локально и позволяет переключать формат вывода без необходимости перекодирования.
Alpha WebM является стандартным форматом для веб-страницы, когда ваша аудитория использует Chromium или Firefox. Всегда предоставляйте резервный вариант: изображение-постер или второй источник, чтобы браузер без поддержки альфа-каналов не отображал черную прямоуголь.
Для небольшого повторяющегося элемента, попробуйте формат Lottie ZIP и последовательность PNG перед тем, как выбрать видео. Руководство по интеграции в веб-браузер охватывает распаковку Lottie ZIP и указание игроку на его графические ресурсы, что является шагом, который чаще всего совершают неправильно.
Завершить задачу
Зафиксировать клип
Загрузите видео, выберите цвет фона и настройте эффект, чтобы край соответствовал цвету, который используется на странице.
Экспортируйте WebM с альфа-каналом первым
Это лучшая поддерживаемая видео с реальным альфа на веб-платформах. Обратите внимание, что запись этого формата требует поддерживаемого браузера: она недоступна в Firefox, хотя Firefox воспроизводит результат.
Добавьте отметку с резервным вариантом.
Используйте видеоэлемент, который является приглушенным, повторяющимся и встроенным, с изображением обложки. Изображение обложки – это то, что отображает браузер без поддержки альфа-канала вместо черного блока, поэтому выбирайте кадр, который выглядит самостоятельно.
Протестируйте на реальном фоне
Разместите его поверх фактического фона страницы, а не на клетчатом фоне, и проверьте на телефоне. Эффекты "светящиеся ореолы" и темные края проявляются на темных фонах и исчезают на светлых.
Сравните с альтернативами
Экспортируйте один и тот же фрагмент как файл Lottie ZIP и последовательность PNG, чтобы сравнить размер файла и четкость. Для коротких циклов обычно побеждает один из них.
Распространенные случаи использования
Акценты для героя и секций
Расположите отслеживаемый объект поверх градиента или фотографии, не используя прямоугольную рамку, которая выдает наличие видео.
Пустые состояния и обучение
Отправьте небольшого повторяющегося персонажа, который будет располагаться на любом фоне, используемом окружающим компонентом, включая темный режим.
Email-safe и doc-safe резервные варианты
Когда целевой элемент не может воспроизводить видео вообще, экспортируйте тот же фрагмент как прозражный GIF и примите наличие резких краев.
Часто задаваемые вопросы
Работает ли прозрачный WebM в Safari?
Не всегда надежно. EasyLottie, Lottie и WebM работают в браузерах Chromium и Firefox; поддержка Safari варьируется в зависимости от версии и платформы, поэтому следует считать ее неподдерживаемой, если вы проверили версии, которые используют ваши посетители. Всегда предоставляйте постер или запасной вариант.
Почему мой прозрачный видеофайл отображает черный фон?
Почти всегда это происходит, потому что браузер декодировал видео, но не смог прочитать альфа-канал, поэтому прозрачные пиксели отображаются как черный. Это сигнал для использования альтернативного изображения, пакета Lottie или прозрачного GIF-файла для этого браузера.
Какую разметку следует использовать?
Видеоэлемент, который отключен, воспроизводит повторно, автоматически воспроизводится и воспроизводится в строку, с атрибутом "poster". Отключение звука и воспроизведение в строку позволяют мобильным браузерам автоматически воспроизводить видео, а "poster" – это ваш резервный вариант, когда alpha не поддерживается.
Является ли прозражный GIF достаточным?
Оно зависит от края. Прозрачность GIF является бинарной — пиксель полностью непрозрачен или полностью прозрачен — поэтому мягкие края становятся грубыми, а полупрозрачные тени невозможны. Для логотипа или иконки с четкими краями это нормально; для персонажа с ключевым эффектом или мягкого свечения это будет выглядеть дешево.
Следует ли использовать Lottie вместо видео?
Для короткого цикла – часто. Важно четко понимать, какой Lottie используется: Lottie, экспортированный из видео с ключевыми кадрами, содержит растровые изображения, поэтому масштабируется как последовательность изображений и не гарантированно будет меньше, чем исходное видео. Lottie, созданный как вектор, – это другой и лучший актив.
Как загрузить экспортированный файл Lottie ZIP на моём сайте?
ZIP-файл содержит JSON-файл и все связанные с ним графические ресурсы, и воспроизводителю необходимы оба файла с сохранением исходных путей. Руководство по интеграции в веб-браузер описывает процесс распаковки и указание lottie-web на папку с ресурсами.
Связанные руководства
Готовы попробовать?
Бесплатное использование, без регистрации. По умолчанию файлы обрабатываются локально.