覆盖视频上的HTML单选按钮

我想覆盖视频顶部的HTML单选按钮，以便您可以选择它们。如果有帮助，我知道每个彩色框的像素坐标。就像在下面的例子中，黑色圆圈代表我可以点击的单选按钮。我如何使用CSS对其进行格式化？覆盖视频上的HTML单选按钮

<style> 
    #container { 
     width: 428px; 
     height: 200px; 
     position: relative; 
    } 

    #overlay { 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     top: 50px; 
     left: 50px; 
     color: red; 
     font-size: 40px; 
     z-index: 10; 
    } 

    #base { 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     top: 0px; 
     left: 0px; 
    } 
</style> 
    </head> 
    <body> 
    <div id="container"> 
     <div id="overlay"> 
     <form action=""> 
      <input type="radio" name="white" value="1" /> 
      <input type="radio" name="white" value="2" /> 
      <input type="radio" name="white" value="3" /> 
      <input type="radio" name="white" value="4" /> 
      <input type="button" id="continue" value="Continue"/> 
     </form> 
     </div> 
     <div id="base"> 
     <video controls> 
      <source src="videos/event_0_Junli_Standing_20150322_181647_00_0.6.mp4" type="video/mp4"> 
      Your browser does not support the video tag. 
     </video> 
     </div> 
    </div> 
    </body>

来源

2017-07-07 Alex Ker

请附上您的代码进行完全采样，所以我们可以看到你所拥有的，你已经尝试过的东西。 – Ryan

@Ryan完成！请删除您的投票。 –

@瑞安你知道我会如何定位他们吗？ –

我最好的选择将只是有单选按钮position: absolute与top:和right:将它们移动的视频。

JSfiddle demo

来源

2017-07-07 15:39:55 Zack

谢谢你的演示，我已经开始工作了，但是如何定位这些按钮以使它们位于视频的特定区域？ –

@AlexKer你在特定区域做什么？在特定的时间点，或者你需要具体的具体位置？ – Zack

他们不会四处移动。如果你看图像，我想要每个彩色框顶部的按钮。我知道那些像素的coorindates。 –

覆盖视频上的HTML单选按钮

回答

相关问题