Video flickers once after changing source
I have a video of 100% width and height with interactive elements above it when you click on a chapter it goes to white and then loads into the video very quickly .. when the video ends and you click on the video it will go to next video and it turns white again and loads the video.
My problem is that it goes to white screen by ~ 500ms because I change the video source, the background color of the body is white, so I believe that where white occurs, the background color to blue or black changes the problem with its white in the corresponding color, I was wondering if there is a solution for this?
I suggested the following: Loading the screen for ~ 500ms goes to white .. it doesn't look good however.
The first frame of the next video as the background of the body is where I load the video so that it appears on the video, but it actually loads in the video.
Code on how to change a video frame to the following video:
$("#klikimg").on('click', function(){
switch(klik) {
case 100:
$("#wereldbol").attr("src", "aardeFrag/klik1.mp4");
klik = 90;
break;
});
source to share
With Chris S. his suggestion to try to render frames again, I did the following:
HTML:
<video src="Wereldbol.mp4" onclick="this.play();" id='wereldbol' preload="auto" > </video>
Load the video after the image so that it doesn't fall into 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, thanks Chris S
note - this only works when changing one video source, as whenever it is loaded in a new frame it still goes black unless you have an image already present on the page
edit: for multiple videos: load each image at the start of your body tag, give them all the same class and 1px width, 1px height and 0 opacity, and then when the video source changes, change the image width and height you need to 100% and the opacity to 1, on the next click, before resizing the image, change the width and height of the image to 1px and the opacity to 0 again, this way it won't go white or black - Credit: Chris S. for this solution, thanks sir!
source to share
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 the video loadeddata
event:
case 100:
$("#loadingDiv").show();
$("#wereldbol").attr("src", "aardeFrag/klik1.mp4");
klik = 90;
break;
and the finished document:
$("#wereldbol").on("loadeddata", function() { $("#loadingDiv").hide(); } );
You can find supported media events here: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
source to share