<video id="video" width="600px" height="400px" autoplay playinline muted loop controls src="test.mp4"> 
</video>
<svg id="svg" width="600" height="400" style="position: absolute; left:8px; background:gray;opacity:0.5">
</svg>
<script>
    let svg_element = document.getElementById("svg");
    let svgns = "http://www.w3.org/2000/svg";
    setInterval(() => {

        let player_element = document.createElementNS(svgns,'circle');
        player_element.setattribute("id","player");
        player_element.setattribute("cx",100);
        player_element.setattribute("cy",100);
        player_element.setattribute("r",40);
        player_element.setattribute("stroke","blue");
        player_element.setattribute("stroke-width",4);
        player_element.setattribute("fill","lightgreen");

        svg_element.appendChild(player_element);

        let animation = document.createElementNS(svgns,"animate")
        animation.setattribute("attributeType","XML")
        animation.setattribute("attributeName","cx")
        animation.setattribute("dur","2s")
        animation.setattribute("to",500)
        animation.setattribute("from",100)
        animation.setattribute("fill","freeze")
        animationID = "test"
        animation.setattribute("id",animationID)
        player = document.getElementById("player")
        previous_animation = document.getElementById(animationID)
        if (previous_animation != null) {
            player.removeChild(previous_animation)
        }
        player.appendChild(animation)

        document.getElementById("svg").setCurrentTime(0);

    },1000);
</script>

这是源代码。 我在这里要做的是控制视频播放。 但是现在，我无法控制，因为SVG区域覆盖了它们。 我需要做什么？ 圆圈元素必须移到视频上方。 将添加更多圈子。