CODEWITHSUNDEEP
htmlvideo
Riveascore
Riveascore

Reputation: 1852

Overlapping two video elements

I'm using the html5 video tag and div tag to hide and unhide elements to make two seperate video files appear to play together as if they were concatenated. The only thing is, I dont' know how to position two video elements at the same location. In fact, I don't know how to position elements anywhere besides the default location they end up at based on precedence. Essentially I hide and unhide elements to make this process work. Any hints on how to get positioning to work?

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

Any hints?

Upvotes: 0

Views: 934

Answers (1)

Brandon Gano
Brandon Gano

Reputation: 6710

You'll want to read up on CSS positioning. For example: http://www.alistapart.com/articles/css-positioning-101/. In your case, it sounds like position: absolute should do the trick.

Upvotes: 1

Related Questions