Question

我的视频宽度为100％＆amp;高度，超过这是互动元素，当你点击章节它变成白色，然后很快加载视频...当视频结束＆amp;点击视频，它将转到下一个视频，然后再转为白色并加载视频。

我的问题是它进入白屏大约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

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

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

Answer 2

尝试在视频元素的顶部添加隐藏的div，在设置视频的src之前显示此div并在视频的loadeddata事件中再次隐藏它：

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

并准备好文件：

$("#wereldbol").on("loadeddata", function() { $("#loadingDiv").hide(); } );

您可以在此处找到支持的媒体事件：https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

Answer 3

我遇到了类似的问题，我已经解决了创建不同的视频 dom 元素并将其附加到 DOM 中的问题。当出现要播放的新视频时，只需从旧的 dom 中删除并将新的 dom 视频元素添加到 DOM。这是我的代码示例：`

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

`

一旦更改源，视频就会闪烁

3 个答案: