Question

我有以下代码：

.background-video {
  position: fixed;
  z-index: -10;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  -webkit-background-size: cover;
  -moz-background-size:cover;
  background: url(video.jpg) no-repeat center center fixed;
  background-size: cover;
}

@media (max-width: 767px) {
  *::-webkit-media-controls-start-playback-button {
    display: none!important;
    -webkit-appearance: none
  }
}

<video autoplay loop class="fillWidth background-video" poster="video.jpg">
  <source src="video.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
  <source src="video.webm" type='video/webm; codecs="vp8.0, vorbis"'/>
  <source src="video.ogg" type='video/ogg; codecs="theora, vorbis"'/>
</video>

解释会发生什么：

在iOS Safari上，我隐藏了视频播放按钮，它显示了视频的第一帧。
在桌面视频中播放无限循环。
当我切换到Android（Oppo R7s ColorOS 5.1.1）而不是第一帧浏览器显示黑色背景时。
虽然在Nexus 5X Android 6.0.1移动Chrome浏览器上一切正常但我可以看到背景图片。

从我从互联网上发现的这种行为的原因可以在移动浏览器中禁用Javascript，但是启用Javascript功能没有帮助。

如果有人有开发OPPO手机的经验，请告诉我们如何在这款手机上显示背景图片而不是黑色背景。

更新：即使赏金已过期，问题仍然存在。

Answer 1

我对此规则持怀疑态度：

-webkit-appearance: none;

我会退出所有CSS并一次添加一条规则来查找违规的个别规则（如果还没有）。最终，您可能不得不在一个视图中妥协，但通过这种方式，您应该能够最大限度地减少损害。

Android

1 个答案: