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之后打包就出现了这个问题
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>