Question

是否有方法使用Web技术将DOM元素放置在特定视频帧的特定坐标上？我试图在视频中将一张脸上的照片漂浮在一个演员的脸上。

非常感谢任何提示或建议或算法！

Answer 1

如果您知道要放置对象的时间（以毫秒为单位），则为是。您可以设置计时器以使用video.currentTime()检查视频的当前时间位置，然后通过绝对定位将对象放置在视频上。

var objects = {
    [
        object: $("<div></div>").addClass("myObject"),
        timeShow: 3;
        timeHide: 9;
    ]
};

var myVideo = document.getElementById('myPlayer');
var currentTime = 0;

setInterval(function() {
    currentTime = myVideo.currentTime();

    for(var i=0; i<objects.length; i++) {
        if(objects[i].timeShow > currentTime && objects[i].timeEnd < currentTime)
            objects[i].object.show();
    }
}, 1000); // loops at 1 second

Answer 2

您可以使用position:absolute并设置top和left CSS属性。

这样的事情：

<div id="container" style="position:relative">
   <video element />
   <div id="blocker" style="width:100px; height:100px; position: absolute; top:240px; left:140px; background:yellow">
   </div>
</div>

所以“阻挡”div将跨越100px×100px，位于距离顶部240px和“容器”div左上角140px的位置。

Answer 3

使用绝对定位position: absolute;（css）来获取设定位置的内容。请注意，您可能需要使用z-index（css）将一个项目与另一个项目重叠。

您也知道：在正在运行的视频中跟踪一张脸并在其上放置一个移动的<div>几乎是不可能的。不确定你想要实现的目标：p

覆盖视频上的DOM元素

3 个答案: