覆蓋視頻上的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單選按鈕

回答

相關問題