Элемент Overlay DOM на видео

Question

Есть ли способ разместить элемент 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> 

Так что «блокиратор» ДИВ будет охватывать 100px на 100px и располагаться на 240 пикселей от верхней и 140px слева от верхней левой части «контейнера» дел.

Answer 3

использование абсолютное позиционирование position: absolute; (CSS), чтобы получить что-то в определенном положении. Обратите внимание, что вам может понадобиться использовать z-index (css) для наложения одного элемента на другой.

Просто, чтобы вы знали: его практически невозможно отследить лицо в движущемся видео и положить на него верхнюю часть <div>. Не знаете, чего вы пытаетесь достичь: p