重叠两个视频元素

时间:2011-12-17 23:21:53

标签: html5 video html

我正在使用html5视频标记和div标记来隐藏和取消隐藏元素,使两个单独的视频文件看起来像是连在一起一起播放。唯一的问题是,我不知道如何在同一个位置放置两个视频元素。事实上,我不知道如何根据优先级将元素放置在它们最终的默认位置之外的任何位置。基本上我隐藏和取消隐藏元素以使这个过程工作。关于如何定位工作的任何提示?

     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)
      }

任何提示?

1 个答案:

答案 0 :(得分:1)

您需要了解CSS定位。例如:http://www.alistapart.com/articles/css-positioning-101/。在你的情况下,听起来像position: absolute应该这样做。