我有以下代码:
.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手机的经验,请告诉如何在这款手机上显示背景图像而不是黑色背景.

更新:即使赏金已经过期,问题仍然保持开放.

解决方法

我怀疑这个规则:
-webkit-appearance: none;

我会退出所有的CSS,并一次添加一个规则,以找到违规的个人规则,如果你还没有.最终,您可能必须在一个视图中妥协,但是通过这种方式,您应该能够最大限度地减少损害.

背景视频的第一帧不会在Android上显示的更多相关文章

  1. HTML实现代码雨源码及效果示例

    这篇文章主要介绍了HTML实现代码雨源码及效果示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  2. 吃透移动端 1px的具体用法

    这篇文章主要介绍了吃透移动端 1px的具体用法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  3. html5开发三八女王节表白神器

    一年一度的三八女王节马上来临,今天小编基于html5给大家开发一个表白神器,做一个 浪漫的程序猿,具体代码大家参考下本文

  4. 基于HTML5+Webkit实现树叶飘落动画

    本文给大家分享一段实例代码给大家介绍基于HTML5+Webkit实现树叶飘落动画效果,需要的朋友参考下吧

  5. html5实现图片转圈的动画效果——让页面动起来

    这篇文章主要介绍了html5实现图片转圈的动画效果——让页面动起来的相关资料,需要的朋友可以参考下

  6. HTML5 3D书本翻页动画的实现示例

    这是一款十分炫酷的HTML5 3D书本翻页动画,效果相对比较简单,拖拽鼠标模拟用手翻页,需要的朋友们下面随着小编来一起学习学习吧

  7. html5简介及新增功能介绍

    这篇文章主要介绍了html5简介及新增功能介绍,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  8. HTML5 图片悬停放大的实现代码示例

    这篇文章主要介绍了HTML5 图片悬停放大的实现代码示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  9. ios – 相机图像旋转问题

    我在这里遇到一个非常奇怪的问题.当我以纵向模式单击图像并上传它然后再次获取它时,显示逆时针旋转90度.但是当我在相机胶卷中看到它时,它会以正确的方向显示.我已经尝试了几乎所有可能的链接/代码来解决这个问题,但似乎没有任何帮助.我以JPEG格式保存图像.请帮助这个人.提前致谢!!解决方法解决方法是在UIImage上创建一个类别,并根据其元数据EXIF缩放和旋转图像.这是一段神奇的代码:

  10. ios – webkit translate3d问题(peek-thru)

    我正在使用PhoneGap构建iOS应用程序.我正在使用translate3dCSS动画来创建“翻转”效果.这对于更简单的元素非常有用……在iPad上作为应用程序和在Safari中的桌面上都会发生相同的情况,因此似乎是一个webkit问题.可能是一些CSS问题?或者是否尝试使用具有大背景图像的复杂嵌套元素进行全屏translate3d旋转,这比Safari可以处理的更多?

随机推荐

  1. bluetooth-lowenergy – Altbeacon库无法在Android 5.0上运行

    昨天我在Nexus4上获得了Android5.0的更新,并且altbeacon库停止了检测信标.似乎在监视和测距时,didEnterRegion和didRangeBeaconsInRegion都没有被调用.即使RadiusNetworks的Locate应用程序现在表现不同,一旦检测到信标的值,它们就不再得到更新,并且通常看起来好像信标超出了范围.我注意到的一点是,现在在logcat中出现以下行“B

  2. android – react-native动态更改响应者

    我正在使用react-native进行Android开发.我有一个视图,如果用户长按,我想显示一个可以拖动的动画视图.我可以使用PanResponder实现这一点,它工作正常.但我想要做的是当用户长按时,用户应该能够继续相同的触摸/按下并拖动新显示的Animated.View.如果您熟悉Google云端硬盘应用,则它具有类似的功能.当用户长按列表中的任何项目时,它会显示可拖动的项目.用户可以直接拖

  3. android – 是否有可能通过使用与最初使用的证书不同的证书对其进行签名来发布更新的应用程序

    是否可以通过使用与最初使用的证书不同的证书进行签名来发布Android应用程序的更新?我知道当我们尝试将这样的构建上传到市场时,它通常会给出错误消息.但有没有任何出路,比如将其标记为主要版本,指定市场中的某个地方?解决方法不,你不能这样做.证书是一种工具,可确保您是首次上传应用程序的人.所以总是备份密钥库!

  4. 如何检测Android中是否存在麦克风?

    ..所以我想在让用户访问语音输入功能之前检测麦克风是否存在.如何检测设备上是否有麦克风.谢谢.解决方法AndroidAPI参考:hasSystemFeature

  5. Android – 调用GONE然后VISIBLE使视图显示在错误的位置

    我有两个视图,A和B,视图A在视图B上方.当我以编程方式将视图A设置为GONE时,它将消失,并且它正下方的视图将转到视图A的位置.但是,当我再次将相同的视图设置为VISIBLE时,它会在视图B上显示.我不希望这样.我希望视图B回到原来的位置,这是我认为会发生的事情.我怎样才能做到这一点?编辑–代码}这里是XML:解决方法您可以尝试将两个视图放在RelativeLayout中并相对于彼此设置它们的位置.

  6. android – 获得一首歌的流派

    我如何阅读与歌曲相关的流派?我可以读这首歌,但是如何抓住这首歌的流派,它存放在哪里?解决方法检查此代码:

  7. android – 使用textShadow折叠工具栏

    我有一个折叠工具栏的问题,在展开状态我想在文本下面有一个模糊的阴影,我使用这段代码:用:我可以更改textColor,它可以工作,但阴影不起作用.我为阴影尝试了很多不同的值.是否可以为折叠文本投射阴影?

  8. android – 重用arm共享库

    我已经建立了armarm共享库.我有兴趣重用一个函数.我想调用该函数并获得返回值.有可能做这样的事吗?我没有任何头文件.我试过这个Android.mk,我把libtest.so放在/jni和/libs/armeabi,/lib/armeabi中.此时我的cpp文件编译,但现在是什么?我从objdump知道它的名字编辑:我试图用这个android.mk从hello-jni示例中添加prebuild库:它工作,但libtest.so相同的代码显示以下错误(启动时)libtest.so存在于libhello-j

  9. android – 为NumberPicker捕获键盘’Done’

    我有一个AlertDialog只有一些文本,一个NumberPicker,一个OK和一个取消.(我知道,这个对话框还没有做它应该保留暂停和恢复状态的事情.)我想在软键盘或其他IME上执行“完成”操作来关闭对话框,就像按下了“OK”一样,因为只有一个小部件可以编辑.看起来处理IME“Done”的最佳方法通常是在TextView上使用setonEditorActionListener.但我没有任何Te

  10. android – 想要在调用WebChromeClient#onCreateWindow时知道目标URL

    当我点击一个带有target=“_blank”属性的超链接时,会调用WebChromeClient#onCreateWindow,但我找不到新的窗口将打开的新方法?主页url是我唯一能知道的东西?我想根据目标网址更改应用行为.任何帮助表示赞赏,谢谢!

返回
顶部