在视频上覆盖 DOM 元素答案

【问题标题】：Overlay DOM element on video在视频上覆盖 DOM 元素
【发布时间】：2014-01-30 07:03:32
【问题描述】：

有没有一种方法可以使用 Web 技术将 DOM 元素放置在特定视频帧的特定坐标上？我正在尝试将我的脸部照片浮在视频中演员的脸上。

任何提示或建议或算法将不胜感激！

【问题讨论】：

【解决方案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

【讨论】：

【解决方案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 将跨越 100 像素 x 100 像素，并位于距“容器”div 顶部 240 像素和左上角 140 像素处。

【讨论】：

【解决方案3】：

使用绝对定位position: absolute; (css) 将某物置于设定位置。请注意，您可能需要使用 z-index (css) 将一项与另一项重叠。

您知道：几乎不可能在正在运行的视频中跟踪人脸并在其上放置移动的<div>。不确定您要达到的目标：p

【讨论】：