CODEWITHSUNDEEP
javascriptjqueryhtmlcssvideo
Gerwin
Gerwin

Reputation: 1612

Video flicker once upon change of source

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

Upvotes: 6

Views: 7334

Answers (3)

Martin Muñoz
Martin Muñoz

Reputation: 516

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

`

Upvotes: 0

Gerwin
Gerwin

Reputation: 1612

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!

Upvotes: 2

artm
artm

Reputation: 8584

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

Upvotes: 1

Related Questions