css – 解决Chrome中视频重叠的问题

2024年1月14日 211次阅读

动画全屏视频背景时,我发现如果两个< video>标签重叠,同时使用转换进行翻译,在OSX上的Chrome中,下一个变暗.它在其他浏览器和Chrome for Windows上都能很好地运行.

video {
  width: 640px;
  height: 320px;
  display: block;
}

.top {
  position:relative;
  transform: translate(0,0);
  transition: transform 1s ease;
}

.bottom {
  position:relative;
  transform: translate(0,10px);
  transition: transform 1s ease;
}

.over:checked ~ .top {
  transform: translate(0, 10%);
}
Over <input class="over" type="checkbox">
<video class="top" src="http://techslides.com/demos/sample-videos/small.mp4" autoplay loop></video>
<video class="bottom" src="http://techslides.com/demos/sample-videos/small.mp4" autoplay loop></video>

我在这里重新创建了这个问题：https://jsfiddle.net/2angdzzy/

是否有针对此问题的解决方法,或者是否有任何人看到或修复过此问题？

最佳答案 这确实是一个奇怪的问题.我发现如果你将视频文件格式改为ogg,就不会发生这种情况.也许你应该尝试其他 HTML supported media formats进行进一步调查.

这是您更新的Fiddle.

然而,包含HTML video的最佳方式是使用多种格式以获得更好的兼容性.

<video width="320" height="240" controls>
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
   Your browser does not support the video tag.
</video>
点赞