Comment déplacer des éléments svg sur une vidéo html5 et contrôler la lecture de la vidéo en même temps ?

Question

<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>

Ceci est un code source. Ce que je veux faire ici est de contrôler la lecture de la vidéo. Mais maintenant, je ne peux pas contrôler parce que la zone SVG les couvre. Que dois-je faire ? L'élément cercle doit se déplacer au-dessus de la vidéo. Il faudrait ajouter d'autres cercles.