비디오의 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> 

는 그래서 "차단"사업부가 100 픽셀에서 100 픽셀에 걸쳐하고 위쪽에서 240 픽셀 및 140px에 위치는 "컨테이너"DIV의 왼쪽 상단에서 왼쪽.

Answer 3

설정 위치에 무언가를 얻으려면 절대 위치 지정 position: absolute; (CSS)을 사용하십시오. 한 항목을 다른 항목과 겹쳐 쓰려면 z-index (CSS)을 사용해야 할 수도 있습니다.

그냥 알다시피 : 실행중인 비디오에서 얼굴을 추적하고 움직임을 <div> 위에 올리는 것은 거의 불가능합니다. 달성하고자하는 것이 확실하지 않은 경우 :