Как сделать прозрачный фон в видео?

Question

[Amalat]

Как сделать у видео прозрачный фон и вставить на сайт (поверх страницы)?

https://www.youtube.com/watch?v=M4bqbljpVrk&ab_channel=megasana29

Comments

[Кирилл Никитин]

Я никогда такого не делал и прокомментирую исключительно теоретически. Сделать ролик с прозрачным фоном самое простое, но форматов поддерживающих альфа-канал не так уж и много. Apple Pro res в контейнере mov, который будет весить как чугунный мост (не для интернета), либо HEVC / h.265 с ограничением по браузерам, либо WebM, тоже с ограничениями по браузерам, но другими.

Далее, если вы убирёте фон из обычного широкоформатного видео и положите верхним слоем на страницу, то никто ничего не сможет нажать. А если сделаете маленьким (обрежете по человеку), то вам через JS придётся двигать этот слой по всей странице. Ну это если как в примере человек должен ходить и что-то показывать.

[Amalat]

Кирилл Никитин, как раз с расположением на сайте я думаю не будет проблем. Так как проигрываться видео будет на определенном месте в одном положении при нажатии на кнопку. Вот только как получить такое видео, с прозрачным фоном...

[Кирилл Никитин]

Amalat, ну вот у вас в тегах AAE, наберите что-то типа "remove background after effects" на YouTube и потом "export alpha channel after effects" — уроков миллион. Вопрос лишь в исходнике, а от этого зависит техника. Если снимали видео сразу на зелёном фоне или просто однородном и если нет.

[Wan-Derer]

Технология называется хромакей (chroma key), поддерживается любой приличной монтажной программой.

Answer 1

[Георгий Тудоси]

Снимайте на однотонном и равномерно освещенном зеленом фоне (если одежда зеленая, то на синем, но результат при прочих равных будет похуже). Дальше Keylight в Ае. Так вы получите видео с прозрачным фоном, которое можно использовать в проекте Ае или экспортировать с альфа-каналом (не все контейнеры и кодеки это поддерживают).

Сложности начнутся, когда вы захотите вставить такое видео на сайт. В голову приходит только контейнер Webm + кодек VP9, такая связка поддерживает альфа-канал. Изучите совместимость с браузерами, и если она вас устроит, это будет, вероятно, лучшим решением.

Вот очень подробная, но устаревшая статья: https://css-tricks.com/overlaying-video-with-trans...

Вероятно, с тех пор поддержка браузерами улучшилась, так что проверьте все утверждения автора. Общие же мысли там остались верными и сейчас.

Comments

[Amalat]

Исходное видео у меня такое:


Я удалил фон в видео через Ae как показано тут (https://www.youtube.com/watch?v=2b796PpS9y8&ab_cha...)

Но при рендере/экспорте фон становиться чёрным. Как именно нужно сохранять видео?
Я добавляю рендер, ставлю QuickTime, так же RGB+альфа канал. На выходе видео формата .mov - через интернет конвектор конвертирую в .mp4

[Кирилл Никитин]

Amalat, mp4 не поддерживает альфа-канал.

[Георгий Тудоси]

Amalat, позвольте дать пару советов по съемке.

Фон у вас хороший. Если это необработанный кадр из камеры — пожалуй, даже завидую такому ровному освещению.

Лицо недоэкспонировано. Картинка станет заметно лучше, если добавить мощности рисующего источника или поставить его поближе. Заодно детали одежды лучше проработаются. (Это всё может быть неверно, если у вас на сайте темный фон и вообще всё в темных тонах, хотя даже в таких условиях я предпочитаю уменьшить яркость при обработке, а не снимать сразу темно.)

Белое вдоль рук и на талии — контровой? Если да, то он у вас установлен неправильно. Его ставят по другую сторону кадра от рисующего, то есть в вашем случае он должен быть позади модели и слева, а не справа. И чуть подальше от направления съемки, чтобы дать блики большей ширины, и, возможно, менее мощный (это будет понятно, когда подвинете). А если это не контровой, то откуда эти артефакты?

Выгонять из Ае можно в mov + prores 4:4:4:4, но потом все равно придется перекодировать для веба. Попробуйте разобраться с ffmpeg — это может оказаться не очень просто, но вы получите в свое распоряжение очень мощный инструмент.

Answer 2

[Daemon23RUS]

Насколько я понял, У вас получилось в АЕ удалить зеленый фон и получить прозрачность
Тогда этот момент при экспорте поможет Вам https://community.adobe.com/t5/after-effects-discu...

Answer 3

[FilmRestoration2019]

Можете использовать нейросети, например https://github.com/PeterL1n/RobustVideoMatting
или попробуйте
Magic Mask в Davinci Resolve Studio 18 https://www.youtube.com/watch?v=HAlfApCFQwI