如何在html5视频上移动svg元素并同时控制视频播放? [英] How to move svg elements over html5 video and control video playback at the same time?

问题描述

<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区域覆盖了它们. 我需要做什么? 圆圈元素必须移到视频上方. 将添加更多圈子.

This is a source code. What I want to do here is to control video play. But now, I can't control because the SVG area covers them. What do I have to do? The circle element must move above the video. More circles would be added.

推荐答案

您可以尝试像这样停止svg的指针事件

You could try stopping the pointer events of the svg like so

svg{
 pointer-events: none;
}

这篇关于如何在html5视频上移动svg元素并同时控制视频播放?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！