uni-app live-pusher组件设置aspect视频比例无法生效 nvue页面 app类似抖音直播 显示区视频无法做到全屏覆盖

uni-app live-pusher组件设置aspect视频比例无法生效 nvue页面 app类似抖音直播 显示区视频无法做到全屏覆盖

测试过的手机

苹果6.7.8 vivo oppo

示例代码

<live-pusher :style="{width:windowWidth,height:windowHeight}" v-show="type!=1"  id='livePusher' ref="livePusher" :class="['livePusher',platform=='ios'?'res':'']" :url="data.push_url"  
mode="SD" :muted="false" :enable-camera="true" :auto-focus="true" :beauty="3" whiteness="3"  
aspect="16:9" @statechange="statechange" @netstatus="netstatus" @error = "error" :orientation="data.live_type==0?'horizontal':'vertical'"  
remote-mirror="true"
>
</live-pusher>

操作步骤

  • live-pusher 设置 aspect 视频比例无法生效 nvue页面 app类似抖音直播 显示区视频无法做到全屏覆盖

预期结果

  • 直播显示区视频做到全屏覆盖

实际结果

  • 视频比例设置无法生效，会有部分黑屏显示，影响用户体验

bug描述

  • live-pusher组件 设置 aspect 视频比例无法生效 nvue页面 app类似抖音直播 显示区视频无法做到全屏覆盖


### 表格
| 信息项           | 内容                       |
|------------------|----------------------------|
| 产品分类         | uniapp/App                 |
| PC开发环境       | Windows                    |
| PC开发环境版本   | 10                         |
| HBuilderX类型    | 正式                       |
| HBuilderX版本    | 3.1.18                     |
| 手机系统         | 全部                       |
| 手机厂商         | 华为                       |
| 页面类型         | nvue                       |
| 打包方式         | 云端                       |
| 项目创建方式     | HBuilderX                  |

更多关于uni-app live-pusher组件设置aspect视频比例无法生效 nvue页面 app类似抖音直播 显示区视频无法做到全屏覆盖的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app live-pusher组件设置aspect视频比例无法生效 nvue页面 app类似抖音直播 显示区视频无法做到全屏覆盖的实战教程也可以访问 https://www.itying.com/category-93-b0.html


针对你遇到的 live-pusher 组件 aspect 属性在 nvue 页面无法生效的问题，这通常是由于 nvue 的样式渲染机制与 vue 页面不同导致的。在 nvue 中，live-pusher 的尺寸和比例控制需要更精确的布局方式。

以下是解决该问题的关键步骤：

  1. 使用 flex 布局确保容器撑满
    在 nvue 中，推荐使用 flex: 1 让 live-pusher 的父容器占满全屏，并设置 position: absolute 覆盖整个区域。示例：

    <template>
  <view class="container">
    <live-pusher
      class="pusher"
      :url="pushUrl"
      aspect="16:9"
      mode="SD"
      @statechange="onStateChange"
    ></live-pusher>
  </view>
</template>

<style scoped>
.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.pusher {
  flex: 1;
}
</style>

  2. 动态计算宽高适配全屏
    如果固定比例（如 16:9）仍无法全屏覆盖，可能需要根据设备屏幕动态计算宽高。通过 uni.getSystemInfoSync() 获取屏幕尺寸，并调整 live-pusher 的样式：

    const systemInfo = uni.getSystemInfoSync();
const windowWidth = systemInfo.windowWidth;
const windowHeight = systemInfo.windowHeight;

    在样式中设置：

    .pusher {
  width: {{windowWidth}}px;
  height: {{windowHeight}}px;
}
回到顶部