在視頻上覆蓋DOM元素

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將跨越100像素和100像素位於240像素從頂部和140px從「容器」 div的左上角離開。

Answer 3

使用絕對定位position: absolute;（CSS），以獲得在設定位置的東西。請注意，您可能需要使用z-index（css）將一個項目與另一個項目重疊。

就這樣你知道：它幾乎不可能跟蹤跑步視頻中的一張臉，並將移動的<div>放在其上。不確定你想要達到的目標：p