在oppo手机上video控件偏移

Question

当前页面是一个iframe里嵌套一个video标签。
有人遇到过在oppo手机上video控件偏移到上面去了吗

Answer 1

在Oppo手机上,video控件偏移的问题可能是由于:

1. 手机虚拟导航栏导致的。Oppo手机默认有虚拟导航栏,当视频播放时,导航栏会自动隐藏,这个过程可能会引起video控件的短暂偏移。
2. 视频自适应引起的。如果video的宽度是100%屏幕宽度,当视频比例不等于手机屏幕比例时,视频会进行缩放以适应屏幕,这个过程也可能造成短暂的偏移。
3. overflow: hidden引起的。如果video的父元素使用了overflow: hidden,该父元素高度变化时,也会引起video的偏移。
   解决方案:
4. 可以在video标签上加一个样式viewport-fit: cover;使视频全屏填充且不变形。
5. 可以给video的父元素加一个padding-bottom,使video的比例变成16:9,避免自适应缩放。
6. 可以去掉父元素的overflow: hidden样式。
7. 可以在video上使用transition过渡,在视频播放前后加上.video-transition类名,来避免突然的偏移,代码如下:
   css
   .video-transition {
   transition: all 0.2s ease;
   }
   html
   
8. 如果是虚拟导航栏引起的,可以在video上使用viewport-fit: cover并给一个较大的底部padding来预留出导航栏的空间。
   希望以上方法能帮助解决在Oppo手机上video控件偏移的问题。