uni-app HBuilderX3.4.7打包生成的APP NVUE页面中 video 全屏 direction设置无效

uni-app HBuilderX3.4.7打包生成的APP NVUE页面中 video 全屏 direction设置无效

开发环境 版本号 项目创建方式
Windows windows 10 HBuilderX
Android Android 12

产品分类:
uniapp/App

PC开发环境操作系统:
Windows

HBuilderX类型:
正式

HBuilderX版本号:
3.4.7

手机系统:
Android

手机系统版本号:
Android 12

手机厂商:
华为

手机机型:
Android手机大部分都这样

页面类型:
nvue

vue版本:
vue2

打包方式:
云端

App下载地址或H5网址:
https://img3.bjphth.com/download/index.html

操作步骤:
点击按钮跳转到NVUE页面,页面打开之后应该是video全屏 视频顺时针90度 播放

预期结果:
希望打开页面视频全屏并横屏播放

实际结果:
无法使用

bug描述:
3.3.11还没出现问题这次更新到3.4.7之后打包就出现了这个问题

demo.rar

6 回复

这个属性,文档上是不支持 app端的。
而且我拿3.3.11 测试这个属性也不生效啊。 你那边3.3.11 可以生效? 你打个包我看看

这个链接下载的apk是可以的

文档上面没写不支持啊

uni-app 中使用 nvue 页面时,video 组件的 direction 属性在某些情况下可能会出现设置无效的问题。以下是一些可能的原因及解决方案:

1. 检查 video 组件的使用方式

  • 确保你正确使用了 video 组件,并且 direction 属性设置正确。例如:
    <video src="your-video-url" direction="0"></video>
  • direction 属性的值可以是 0(默认方向)、90(顺时针旋转90度)、-90(逆时针旋转90度)。

2. 检查 HBuilderX 版本

  • 确保你使用的 HBuilderX 版本是最新的,或者至少是稳定版本。旧版本可能存在一些 bug,更新到最新版本可能会解决问题。

3. 检查 nvue 页面的渲染模式

  • nvue 页面使用的是原生渲染,与 vue 页面的 WebView 渲染不同。某些属性在 nvue 页面中可能表现不一致。确保你了解 nvue 页面的特性。

4. 使用 uni.createVideoContext

  • 如果你通过 uni.createVideoContext 来操作 video 组件,可以尝试通过该方法设置 direction。例如:
    const videoContext = uni.createVideoContext('myVideo');
    videoContext.direction = 90;

5. 检查平台的兼容性

  • direction 属性在某些平台上可能不支持或表现不一致。例如,iOS 和 Android 对 video 组件的支持可能存在差异。确保你在目标平台上进行了充分的测试。

6. 使用 uni-app 官方社区或文档

  • 如果问题依然存在,可以查阅 uni-app 的官方文档或在官方社区中寻求帮助。可能有其他开发者遇到过类似的问题,并且已经有了解决方案。

7. 替代方案

  • 如果 direction 属性确实无法生效,可以考虑使用其他方式来实现视频旋转效果。例如,使用 CSS 旋转视频容器,或者使用原生插件来实现视频旋转。

示例代码

<template>
  <view class="container">
    <video id="myVideo" src="your-video-url" direction="90"></video>
    <button @click="rotateVideo">Rotate Video</button>
  </view>
</template>

<script>
export default {
  methods: {
    rotateVideo() {
      const videoContext = uni.createVideoContext('myVideo');
      videoContext.direction = 90;
    }
  }
}
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!