How to move svg elements over html5 video and control video playback at the same time?

Nov 17 '19 Comments: 1 Answers: 1

3

<video id="video" width="600px" height="400px" autoplay playinline muted loop controls src="test.mp4"&gt
</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",

…

Open Full Question