我有以下代码:
.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手机的经验,请告诉如何在这款手机上显示背景图像而不是黑色背景.
更新:即使赏金已经过期,问题仍然保持开放.
解决方法
我怀疑这个规则:
-webkit-appearance: none;
我会退出所有的CSS,并一次添加一个规则,以找到违规的个人规则,如果你还没有.最终,您可能必须在一个视图中妥协,但是通过这种方式,您应该能够最大限度地减少损害.