“如何阻止白色”；闪光“；在javascript视频重新加载之间？

我正在建立一个视频背景网站。我有一些javascript（如下所示），它根据屏幕大小和带宽选择最合适的视频源。它首先显示默认的低分辨率版本，然后在计算带宽后，将合适的最高质量设置为新元素源。但是，这意味着当分辨率在

video.load（）上“升级”时命令，背景闪烁白色。有没有一种方法可以让过渡变得不那么突兀，比如视频流网站改变中分辨率视频

<div class="video-container">
  <video autoplay loop mob-hide id="video">
    <source src="Images/Medium.mp4" type="video/mp4" />
    Your browser does not support the video tag. I suggest you upgrade your browser.</video>
</div>


您的浏览器不支持视频标记。我建议你升级你的浏览器。

JS:

var video=document.getElementById（'video'）；
如果（screen.width>992&&screen.width 0&&speedMbps 5&&speedMbps真的没有办法忽略这一点。你可以在视频后面添加一个静止图像作为div，并将其设置为z索引。-或者-查看为你的网站创建预加载程序。这基本上是因为视频的源正在更改，我认为f现在将在要加载的较新视频的背景上播放此初始视频，一旦此新视频开始播放，您将删除“背景视频”？可能不是最佳解决方案，但可能会为您解决此问题。@dbrree谢谢。我的背景色设置为黑色，因此在等待加载第一个视频时我的背景是黑色的，为什么闪光灯不是黑色的呢？你对z-index的引用是否有帮助？我不是100%确定它是否能解决问题，但如果站在你的立场上，我个人会试试。我可能没有解决问题的知识。祝你好运！
var video = document.getElementById('video');
if (screen.width > 992 && screen.width <= 1200) {
            console.log(screen.width);
            if (speedMbps > 0 && speedMbps <= 5) {
                video.setAttribute("src", "Images/Medium.mp4");
            }
            if (speedMbps > 5 && speedMbps <= 10) {
                video.setAttribute("src", "../Images/Large.mp4");
            }
            //more options etc.
        }
video.load();