2つのビデオ要素が重複しています

Question

私はhtml5 videoタグとdivタグを使用して要素を表示/非表示し、別々の2つのビデオファイルを連結しているように見せるようにしています。唯一のことは、同じ場所に2つのビデオ要素を配置する方法はわかりません。実際には、優先順位に基づいて終了するデフォルトの場所以外の場所に要素を配置する方法はわかりません。基本的には、このプロセスを動作させるために要素を隠したり再表示したりします。ポジショニングの仕方に関するヒント

 function play(first, second){ 
     var video1 = document.getElementById("video1") 
     var v1Hide = document.getElementById("v1") 

     var video2 = document.getElementById("video2") 
     var v2Hide = document.getElementById("v2") 

     video1.setAttribute("src", first) 
     video2.setAttribute("src", second) 
     video1.load() 
     video2.load() 

     video1.play() //starts playing this one Visibly while 2nd is loaded but hidden 

     setTimeout(function(){ 
      v1.style.visibility = 'hidden' 
      v2.style.visibility = 'visible' 
      video2.play() 
      video1.pause() 
      }, 2000) 
     } 

ヒント

Answer 1

CSSの配置についてお読みください。例：http://www.alistapart.com/articles/css-positioning-101/。あなたの場合、position: absoluteのように聞こえます。