在Android上不显示背景视频的第一帧

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 And​​roid 6.0.1移动Chrome浏览器上一切正常但我可以看到背景图片.

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

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

更新:即使赏金已过期,问题仍然存在.

Answer 1

我对这个规则表示怀疑：

-webkit-appearance: none;

我会撤消所有 CSS 并一次将其添加回一条规则，以找到有问题的单个规则（如果您还没有找到）。最终，你可能不得不在一种观点上妥协，但这样你应该能够将损害降到最低。