Video flicker once upon change of source

Question

I have a video as 100% width & height, over that are interactive elements, when you click on the chapter it goes to white and then loads in a video very quickly.. when the video ends & you click on the video, it will go to the next video and again it goes to white and loads the video.

My issue is that it goes to a white screen for ~500ms, because I change the video source of the video-frame, the background-color of the body is white so I believe that's where the white comes from, changing the background color to blue or black changes the issue witht he white in their respective color, I was wondering if there is a solution for this?

I've suggested the following: Loading screen for the ~500ms it goes to white.. this however doesn't look good.

First frame of the next video as background of the body, where I load the video over, so that it appears to be on the video but it's actually loading in the video.

The code as to how I change the video frame to the next video:

$("#klikimg").on('click', function(){

                switch(klik) {


                    case 100:
                        $("#wereldbol").attr("src", "aardeFrag/klik1.mp4");
                        klik = 90;
                    break;
    });

Answer 1

With Chris S. his suggestion of trying image frames again I did the following:

html:

    <video src="Wereldbol.mp4" onclick="this.play();" id='wereldbol' preload="auto" > </video>

Loaded the video in after the image, so that it wouldn't fall back on white or black for example.

CSS:

#tFrame{
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
z-index: -1;
overflow: hidden;
background-size:cover;
}

this is the css code I used, thank you, Chris S

note - this only works for one video source changing, as whenever it loads in a new frame it still goes to black if you don't have the image already present on the page

edit: For multiple video's: Load in every image at the beginning of your body tag, give them all the same class, and a width of 1px, height of 1 px and opacity of 0, then when you change your video source, change the width & height of the image you need to 100% and opacity to 1, on the next click, just before you change the image again change the image width & height to 1px and opacity to 0, this way it won't go to white or black -- Credit to: Chris S. for this solution, thank you Sir!

Answer 2

Try adding a hidden div on top of the video element, show this div before you set the src of the video and hide it again on video's loadeddata event:

case 100:
    $("#loadingDiv").show();
    $("#wereldbol").attr("src", "aardeFrag/klik1.mp4");
    klik = 90;
    break;

and on document ready:

$("#wereldbol").on("loadeddata", function() { $("#loadingDiv").hide(); } );

You can find the supported media events here: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events