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

这确实是一个奇怪的问题。我发现如果您将视频文件格式更改为Thread t = new Thread(r); t.start();，则不会发生这种情况。也许您应该尝试其他HTML supported media formats进行进一步调查。

这是您更新的Fiddle。

尽管如此，包含HTML video的最佳方法是使用多种格式以提高兼容性。

ogg

修复了Chrome中视频重叠的问题

1 个答案: