CSS背景图像过渡使视频标签缓冲区

我有一个视频标签，我想连续播放，而用户可以同时在网站上做事。但是，我发现，如果视频开始缓冲的背景图像之间的背景过渡。我在下面的片段中有一个可运行的示例。

注意：如果摘要正常运行，则似乎不会发生缓冲，但是如果将摘要放在"完整页面"中，则确实会发生缓冲。

function changeBackground() {
  const randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
  const element = document.getElementById('background');
  const currentOpacity = element.style.opacity;
  const currentBackground = element.style.backgroundImage;
  
  switch (currentBackground) {
    case 'url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png")': {
      element.style.backgroundImage = 'url("https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg")';
      break;
    }
    case 'url("https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg")': {
      element.style.backgroundImage = 'url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png")';
      break;
    }
    default: {
      break;
    }
  }
}
 
 const element = document.getElementById('background');
 element.style.backgroundImage = 'url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png")'

#background {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -10;
  
  background-size: contain;
  
  transition: background-image 3s ease-in-out;
}
#button {
  display: flex;
  width: 200px;
  height: 100px;
  background-color: orange;
  text-align: center;
}
#video {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  width: 400px;
  height: 350px;
}

<div id='root' style='width: 100%; height: 500px'>
    <div id='background'></div>
    <div id='button' onClick="changeBackground()">Click me to change the background!</div>
    <video
      id='video'
      autoplay
      muted
      loop
      controls
      src="https://s3.amazonaws.com/codecademy-content/courses/React/react_video-cute.mp4"/>
</div>

可能是什么原因，并且有一种方法可以防止视频在仍然进行背景图像过渡时进行缓冲？

编辑：补充说我在MacOS上的Chrome可能很重要。

编辑2：从我收集的响应中，并不是每个人都可以重现问题，所以我去了一台旧的Windows PC并在那里尝试了它。发现背景转变确实很慢，很懒惰，但是视频毫无问题地播放。它还可以在MacOS上的Safari上使用，因此这似乎是 Chrome Macos-仅问题。

我必须承认我不确定这里发生的事情...鉴于这不是100％的repro案例，也很难确保任何解决方法实际上有效...

但这里有一些评论和想法。

似乎只有 .mp4 文件才会发生。我可以用其他 .mp4 视频复制，但从来没有任何 .webm file。
因此，您可能想尝试的一件事是在WebM中重新编码视频，可能是Chrome的MP4解码器有一些问题。

看来CSS 动画不会引起此问题。因此，您可以将过渡代码重写为CSS动画，这是一个主要问题，您将无法在中间停止它(但是无论如何，背景传输似乎都不好(。

function changeBackground() {
  const element = document.getElementById('background');
  if(element.classList.contains('apple')) {
    element.classList.remove('apple');
    element.classList.add('so');
  }
  else {
    element.classList.add('apple');
    element.classList.remove('so');
  }
}

#background {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -10;
  
  background-size: contain;
  background-image: url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png");
}
#background.apple {
  animation: apple-to-SO 3s ease-in-out forwards;
}
#background.so {
  animation: SO-to-apple 3s ease-in-out forwards;
}
@keyframes apple-to-SO {
  from {
    background-image: url("https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg")
  }
  to {
    background-image: url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png");
  }
}
@keyframes SO-to-apple {
  from {
    background-image: url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png");
  }
  to {
    background-image: url("https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg")
  }
}
#button {
  display: flex;
  width: 200px;
  height: 100px;
  background-color: orange;
  text-align: center;
}
#video {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  width: 400px;
  height: 350px;
}

<div id='root' style='width: 100%; height: 500px'>
    <div id='background'></div>
    <div id='button' onClick="changeBackground()">Click me to change the background!</div>
    <video
      id='video'
      autoplay
      muted
      loop
      controls
      src="https://s3.amazonaws.com/codecademy-content/courses/React/react_video-cute.mp4"/>
</div>

现在，如果您喜欢JS控件，似乎也没有受到Web动画的影响。

let current = 1;
const urls = [
  "https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png",
  "https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg"
];
function changeBackground() {
  const element = document.getElementById('background');
  element.animate({
      backgroundImage: ['url(' + urls[current] + ')', 'url(' + urls[+(!current)] + ')']
      }
    , {
      duration: 3000,
      iterations: 1,
      fill: 'both'
    }
  );
  current  = (current + 1) % 2;
}

#background {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -10;
  
  background-size: contain;
  background-image: url(https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png);
}
#button {
  display: flex;
  width: 200px;
  height: 100px;
  background-color: orange;
  text-align: center;
}
#video {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  width: 400px;
  height: 350px;
}

<div id='root' style='width: 100%; height: 500px'>
    <div id='background'></div>
    <div id='button' onClick="changeBackground()">Click me to change the background!</div>
    <video
      id='video'
      autoplay
      muted
      loop
      controls
      src="https://s3.amazonaws.com/codecademy-content/courses/React/react_video-cute.mp4"/>
</div>

尝试在chrome上启用/禁用硬件加速器。

我无法再现问题，因此您的ISP和延迟可能是一个问题(我没有145 Mbps的问题(。查看您的代码，该开关效率不太有效。下面的演示使用数组(还添加了另一个图像(。顺便说一句，为包含儿童元素的元素添加flex，否则它是毫无意义的。

document.getElementById('button').onclick = changeBackground;
let i = 0;
function changeBackground(e) {
  const images = ["https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png", "https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg", "https://media.istockphoto.com/vectors/circuit-board-seamless-pattern-vector-background-microchip-technology-vector-id1018272944"];
  const background = document.getElementById('background');
  i++;
  if (i >= images.length) {
    i = 0;
  }
  background.style.backgroundImage = `url(${images[i]})`;
  return false;
}

#background {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -10;
  background-size: contain;
  background-image: url(https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png);
  transition: background-image 3s ease-in-out;
  background-repeat: repeat-x;
}
#button {
  width: 200px;
  height: 100px;
  background-color: orange;
  text-align: center;
}
#video {
  position: absolute;
  top: 0;
  right: 0;
  width: 400px;
  height: 350px;
}

<div id='root' style='width: 100%; height: 500px'>
  <div id='background'></div>
  <div id='button'>Click me to change the background!</div>
  <video id='video' autoplay muted loop controls src="https://s3.amazonaws.com/codecademy-content/courses/React/react_video-cute.mp4"></video>
</div>

这个问题很有趣。

我认为缓冲区可能是由于

此行Math.floor(Math.random((*16777215(.tostring(16(;
关于视频分辨率以及在多大程度上进行了调整
也可能是由于某些不必要的代码所致。

相关内容

最新更新

热门标签：