如何在HTML5视频上移动SVG元素并同时控制视频播放？

Question

如何在HTML5视频上移动SVG元素并同时控制视频播放？

javascriptcsshtml5-videoz-indexsvg-animate

3

<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区域覆盖了它们。我该怎么办？圆形元素必须在视频上方移动。可以添加更多的圆。

- Yuji

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dylan Anlezark · Accepted Answer

你可以尝试停止svg的指针事件，像这样：

svg{
 pointer-events: none;
}