1

ビデオの別のインスタンスの上にオーバーレイされたテキストのビデオマスクを取得しようとしています。私は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 では、マスキングなしで 2 つの動画を重ねて表示するだけです。理由、または回避策があるかどうか、何か考えはありますか?

4

1 に答える 1