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