title: How to use ffmpeg and javascript for user to add input box inside of a video
body: <p>I work on my website and the problem i faces is that i cant find a working way to get the chance for a user to drag an input box and set it into video specifying duration for the item.</p>
  
  <p>so i have a video and a textbox and my problem is when i grag the box i want it to stck to the video and stay there.</p>
  
  <p>Code is here:
  
      </p>
  
  <pre><code>&lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Bubble Factory Test Lab&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="css\styles.css"&gt;
      &lt;script&gt;
          function allowDrop(ev) {
              ev.preventDefault();
          }
  
          function drag(ev) {
              ev.dataTransfer.setData("text", ev.target.id);
          }
  
          function drop(ev) {
              ev.preventDefault();
              var data = ev.dataTransfer.getData("text");
              ev.target.appendChild(document.getElementById(data));
          }
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;video id="div1" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" width="400px" heigh="300px"&gt;
          &lt;source src="videos/CGI 3D Animated Short Film HD- 'The Answer' - by Xin Zhao &amp; Florent Rubio.mp4" type="video/mp4"&gt;
      &lt;/video&gt;
      &lt;input type="text" draggable="true" ondragstart="drag(event)" id="drag1" placeholder="drag"&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>