javascript - 在视频上叠加 DOM 元素

Question

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

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

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