Я пытаюсь получить видеомаску некоторого текста, наложенную поверх другого экземпляра видео. Я добился желаемого эффекта в FF:
Наложение текста, маскирующее экземпляр того же видео, поверх которого оно наложено. Для этого я использовал следующий код:
<video id="bkg" src="/locations.mp4" autoplay loop></video>
<svg class="svg" xmlns="http://www.w3.org/2000/svg">
<clippath id="cp-circle">
<text
text-anchor="middle"
x="50%"
y="98%"
>TEXT TEXT</text>
</clippath>
<g clip-path="url(#cp-circle)">
<foreignObject width="853" x="0"
y="0" height="480">
<body xmlns="http://www.w3.org/1999/xhtml">
<video id="bkg2" src="/locations.mp4" autoplay loop></video>
</body>
</foreignObject>
</g>
</svg>
<script>
document.getElementById("bkg").playbackRate = 0.8;
</script>
В Chrome это просто отображает два видео друг над другом без маскировки. Любая идея, почему или если есть обходной путь?
