更换源时视频闪烁一次

Question

我有一个 100% 宽度和高度的视频，上面是交互式元素，当你点击章节时它会变成白色，然后非常快速地加载视频......当视频结束并点击视频时，它会转到下一个视频，它再次变为白色并加载视频。

我的问题是它进入白屏约 500 毫秒，因为我更改了视频帧的视频源，主体的背景颜色是白色，所以我相信这就是白色的来源，将背景颜色更改为蓝色或黑色改变了他们各自颜色的白色问题，我想知道是否有解决方案？

我提出了以下建议： 加载屏幕约 500 毫秒它变成白色.. 但是这看起来不太好。

下一个视频的第一帧作为主体的背景，我将视频加载到此处，使其看起来在视频中，但实际上是在视频中加载。

关于如何将视频帧更改为下一个视频的代码：

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

                switch(klik) {


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

Answer 1

根据 Chris S. 再次尝试图像框架的建议，我执行了以下操作：

html:

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

在图像之后加载视频，这样它就不会变回白色或黑色。

CSS：

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

这是我使用的CSS代码，谢谢你，Chris S

注意 - 这仅适用于一个视频源更改，因为每当它加载到新帧中时，如果页面上没有图像，它仍然会变成黑色

编辑：对于多个视频：在 body 标签开头加载每个图像，给它们相同的类，宽度为 1px，高度为 1px，不透明度为 0，然后当您更改视频源时，更改图像的宽度和高度需要为 100%，不透明度为 1，下次单击时，在再次更改图像之前，将图像宽度和高度更改为 1px，不透明度为 0，这样它就不会变成白色或黑色 - 感谢：Chris S. 提供了这个解决方案，谢谢先生！