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

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

• javascript
• jquery
• html
• css
• video

• May sound too easy for an acceptable solution but does anything speak against setting the background to black or loading the 2nd video over the first one and removing the first when the 2nd started playing? – Chris S. Commented Oct 31, 2014 at 8:15
• I will give it a try, and the background to black works fine it just doesn't look good at all, thank you give me a moment to implement it please – Gerwin Commented Oct 31, 2014 at 8:20
• You may want to use z-index (CSS) to ensure the layer depth is correct. – Chris S. Commented Oct 31, 2014 at 8:22
• Something like $vc = $("#wereldbol").clone().src($newsrc).css({"z-index":"2"}); $("#wereldbol").addClass("old_content").css({"z-index":"1"}).parent().append($vc); and when the 2nd video starts playing, you do $(".old_content").remove(); – Chris S. Commented Oct 31, 2014 at 8:26
• That's what I am currently using, it also appears that using two video's makes the browser quite a bit slower.. this would've to be done for 15 video's, do you see anyway to get my idea with images working? I've tried coding it exactly the same as the example seen above edit: ah I didn't see your new post thank you – Gerwin Commented Oct 31, 2014 at 8:28

3 Answers 3

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!

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/en-US/docs/Web/Guide/Events/Media_events

I've similar problem and I've solved just creating differents video dom elements and append it in to the DOM. When a new video to be played appears just remove from the dom the older and add the new dom video element to the DOM. Here is an example of my code:`

function playVideo(aviso){
  let newVideo = document.createElement('video');
  newVideo.style.cursor = 'none !important';
  newVideo.style.width = pantalla.width;
  newVideo.style.height = pantalla.height;
  newVideo.muted = true;
  newVideo.src = aviso.url;
  newVideo.style.objectFit  = 'contain';
  const sourceElem = document.createElement('source');
  sourceElem.src = '';
  const pElem = document.createElement('P');
  pElem.innerHTML = 'No soporta video';
  newVideo.appendChild(sourceElem);
  newVideo.appendChild(pElem);
  newVideo.oncanplay = function() {
    // video.style.visibility = 'visible';
    removeCurrents();
    document.body.appendChild(newVideo);
    newVideo.play();
    currentVideo = newVideo;
  };

`