uni-app nvue下给video上方添加一个view导致视频错位

uni-app nvue下给video上方添加一个view导致视频错位

开发环境 版本号 项目创建方式
Mac 11.5.2 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：11.5.2

HBuilderX类型：正式

HBuilderX版本号：3.2.3

手机系统：iOS

手机系统版本号：iOS 12.4

手机厂商：苹果

手机机型：iphone6

页面类型：nvue

打包方式：云端

示例代码：

<template>  
  <view class="video-info">  
    <view class="statusheight"></view>  
    <video src="http://vd3.bdstatic.com/mdamfdfwhifvxcbgv33/fhd/cae_h264_nowatermark/1623669824504717294/mda-mfdfwhifvxcbgv33.mp4" poster="http://t14.baidu.com/it/u=3577019644,4120128985&fm=225&app=113&f=JPEG?w=1920&h=1080&s=4B016088789285EB451C3D120300D0D2" controls class="myvideo"></video>  
    <view class="down-box"></view>  
    <text class="text">绿色边框是没有高度的view</text>  
    <text class="text">黄色边框是50px高度的view，在视频上面</text>  
    <text class="text">红色边框视频，高度416rpx</text>  
    <text class="text">蓝色色边框视频下面的view，高度100px</text>  
    <text class="text">视频上方有view后安卓正常，ios错位</text>  
    <text class="text">安卓video还加不了边框</text>  
  </view>  
</template>  
<script>  
  export default {  
    data() {  
      return {  

      }  
    }  
  }  
</script>  
<style>  
  .text{  
    font-size: 28rpx;  
  }  
  .down-box{  
    height: 100px;  
    width: 700rpx;  
    border-style: solid;  
    border-width: 4px;  
    border-color: blue;  
  }  
  .video-info {  
    width: 716rpx;  
    margin: 0 21rpx;  
    border-style: solid;  
    border-width: 4px;  
    border-color: green;  
  }  

  .statusheight {  
    border-style: solid;  
    border-width: 4px;  
    border-color: yellow;  
    height: 50px;  
  }  

  .myvideo {  
    width: 700rpx;  
    height: 416rpx;  
    border-style: solid;  
    border-width: 4px;  
    border-color: #f00;  
    background-color:rgba(38, 42, 54, 0.5);  
  }  
</style>

操作步骤：

运行示例代码就看出来了

预期结果：

视频不错位

实际结果：

视频错位

bug描述：

给视频 上方加一个view，视频会错位

示例图片


更多关于uni-app nvue下给video上方添加一个view导致视频错位的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

感谢反馈 bug 已确认，下个版本会修复此问题

更多关于uni-app nvue下给video上方添加一个view导致视频错位的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你好，报告一个问题。可能是bug，也可能是文档没说明。 plus.webview.create创建的窗口。plusrequire=none【不注入5+ API】。 但是使用appendJsFile预加载js文件，却无效。js文件中并无使用plus能力。 虽然不注入，但是js文件应该注入才对啊。没道理不注入。如果真的不注入，还望文档备注一下

回复 2***@qq.com: 不注入 5+api 表示所有5+api将不生效包括 appendJsFile

HBuilderX alpha 3.2.5+ 已修复

在 nvue 中，video 组件默认是原生组件，层级较高，与前端元素混合布局时可能出现位置异常。你遇到的问题是在 iOS 上 video 上方添加 view 后视频错位，这通常是由于原生组件层级渲染机制导致的。

原因分析：

  1. nvue 页面中，video 作为原生组件，其渲染层级独立于前端视图。
  2. 当 video 上方有前端元素（如 view）时，iOS 上可能出现布局计算偏差，导致 video 位置下移或错位。
  3. 安卓上 video 无法添加边框也是因为原生组件样式限制。

解决方案：

  1. 使用 cover-view 替代普通 view：将 video 上方的 view 改为 cover-view，cover-view 是专用于覆盖在原生组件上的视图容器，能避免层级冲突。
  2. 调整布局结构：确保 video 和其上方元素在同一容器内，并使用绝对定位或弹性布局控制位置。
  3. 检查样式单位：nvue 中推荐使用 px 而非 rpx，因为 rpx 在部分场景下转换可能不一致。

修改建议：

  • 将 .statusheight 改为 cover-view，并确保其父容器为相对定位。
  • 视频容器使用固定高度，避免动态计算导致的错位。

示例调整：

<view class="video-info">
  <cover-view class="statusheight"></cover-view>
  <video class="myvideo" ...></video>
</view>
回到顶部