修复 Chrome 中视频重叠的问题

Question

在为全屏视频背景制作动画时，我发现如果两个 <video> 标签重叠，而在用 transform 翻译时，在 OSX 上的 Chrome 中，下面的标签会变暗。它可以在其他浏览器和 Windows 版 Chrome 上完美运行。

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>