解决了 Chrome 中视频重叠的问题

Question

在制作全屏视频背景动画时，我发现如果两个 <video> 标签重叠，同时用 transform 翻译，在 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/

这个问题是否有任何解决方法，或者你们中有人看到或解决了这个问题吗？

Answer 1

这确实是一个奇怪的问题。我发现如果将视频文件格式更改为 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>

解决了 Chrome 中视频重叠的问题

Fixing an issue with video overlapping in Chrome

html

css

google-chrome

html5-video