如何使用ffmpeg和javascript为用户在视频中添加输入框_Javascript_Html_Video_Ffmpeg_Drag And Drop

如何使用ffmpeg和javascript为用户在视频中添加输入框

javascript html video ffmpeg

如何使用ffmpeg和javascript为用户在视频中添加输入框,javascript,html,video,ffmpeg,drag-and-drop,Javascript,Html,Video,Ffmpeg,Drag And Drop,我在我的网站上工作，我面临的问题是，我找不到一种有效的方法让用户有机会拖动输入框并将其设置为视频，指定项目的持续时间所以我有一个视频和一个文本框，我的问题是当我抓起这个框时，我想让它进入视频并停留在那里代码如下：气泡工厂试验室功能allowDrop（ev）{ ev.preventDefault（）； } 功能阻力（ev）{ ev.dataTransfer.setData（“文本”，ev.target.id）； } 功能下降（ev）{ ev.preventDefault（）； var

我在我的网站上工作，我面临的问题是，我找不到一种有效的方法让用户有机会拖动输入框并将其设置为视频，指定项目的持续时间

所以我有一个视频和一个文本框，我的问题是当我抓起这个框时，我想让它进入视频并停留在那里

代码如下：


气泡工厂试验室
功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}

<head>
    <meta charset="utf-8">
    <title>Bubble Factory Test Lab</title>
    <link rel="stylesheet" type="text/css" href="css\styles.css">
    <script>
        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));
        }
    </script>
</head>

<body>
    <video id="div1" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" width="400px" heigh="300px">
        <source src="videos/CGI 3D Animated Short Film HD- 'The Answer' - by Xin Zhao & Florent Rubio.mp4" type="video/mp4">
    </video>
    <input type="text" draggable="true" ondragstart="drag(event)" id="drag1" placeholder="drag">
</body>

</html>