我正在尝试获取一些文本的视频掩码,覆盖在另一个视频实例之上。我在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 中,这只是将两个视频叠加在一起,没有遮罩。知道为什么或是否有解决方法吗?