Как использовать маску на видео?

Question

[qbk17]

Можно ли как нибудь реализовать такое?:


Нужно чтобы видео проигрывалось только в этом элементе

Answer 1

[Ivan Bogachev]

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

Comments

[qbk17]

Не вариант, или я чего то не понимаю? В таком случае у нас будет дырка для видео, а вся остальная часть svg (не пустая) будет видна.

[Ivan Bogachev]

а вся остальная часть svg (не пустая) будет видна

qbk17, разумеется. Если вы хотите при этом иметь прозрачный фон вокруг, то лучше сразу это уточнять в вопросе - по картинке сложно такое предположить.

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