-1

I have a welcome video playing by default in loop and when a user click on change video button a different video starts playing. But there is a blackout between change of video for about 1-3 seconds. I want to present my video as the video has not changed its still playing same video [I want it look like that a single video is playing i don't want blackout interfering with it]

Here how i am changing video

<!DOCTYPE html>
<html>
<head><title>Draw your gifts here</title></head>
<body>
<video width="1000" id="videotag" autoplay controls>
    <source src="media/welcome.mp4">
This browser does not support this format please upgrade your browser or use different browser
</video>
<button type="button" onClick="changeVideo()">Change Video</button>
</body>
<script>
function changeVideo(){
    var video_player = document.getElementById("videotag");
    video_player.src = "media/draw1.mp4";
}
</script>
</html>
Skyyy
  • 1,539
  • 2
  • 23
  • 60
  • Depending on the size of your second video you might want to load it into a blob (pre-buffer) and then swap the source... there may still be a transition time but a lot smaller - see https://stackoverflow.com/questions/18251632/another-force-chrome-to-fully-buffer-mp4-video/18294706#18294706 for a sample (and up-vote if it helps! ) – Offbeatmammal Sep 12 '15 at 20:41

1 Answers1

1

You can use preload auto for preventing the loading delay 

<video width="1000" id="videotag" autoplay preload="auto" controls>
   <source src="media/welcome.mp4">
   This browser does not support this format please upgrade your browser or use different browser
</video>
ScaisEdge
  • 131,976
  • 10
  • 91
  • 107
  • There is still a little black flash between video changes. – Skyyy Sep 12 '15 at 19:31
  • I hope that my suggestion has improved the situation. I think that a slight delay is due to the time of loading. If so, or displays the page only after the charging is finished or accept slight delay – ScaisEdge Sep 12 '15 at 19:35