How to change html5-video-source if second video is loaded without black frame between both?

I m recently working on an interactive video projects, where users can interact with the video (f.e. click in the video on some person, to see a new video, where user is going to that person...). changing the video sources is not the problem (check code below), but my problem occurs between step 'A' and 'C'

i m clearing the current source (A), create a new one (B) and start the new video (C), which shows me the black background of the videoelement between 'A' and 'C'. not really long, let's say <50ms, but still it's really going on my nerves. my only idea is, to work with two video-elements and switch them, if the next video is ready to play. anyone some better idea?

playVideoElement:function( videoelement ){

    //empty current source nodes  (A)

    //set new source  (B)
    this.videoPlayer.adopt( new Element('source').setProperties( ... ) );

    //start new video  (C)


so basically my question is: is there a way to set a new source to the videoelement, which is ready to play?


Can you set up two divs, one for the current source, and the other with the new source. Use css to set the second one to be hidden, and set its autoplay to false, preload to none. When you need switch videos, simply hide the first one (remove the div may also work), and show the second div, plus load and play the second video?

Need Your Help

Keys: Reorganizing definition list based on attribute

xml xslt xpath

I posted a question about keys yesterday, and got very helpful responses. I've been working on the last detail in this particular file set most of today; there must just be something I'm missing wh...

How to move map under a marker? android

java android android-mapview drag marker

I want to implement the drag effect of a map. When we drag the map the marker should show the current position or latitude and longitude. Its done in Uber application see below: