uni-app IOS视频播放时点击全屏界面旋转90度，视频旋转180度
uni-app IOS视频播放时点击全屏界面旋转90度，视频旋转180度
测试过的手机
- iphone 14
操作步骤
- 使用苹果手机下载兴源云，使用账号密码登录，点击课程选择视频播放，点击全屏
预期结果
- 打包上线点击全屏能正常横向播放
实际结果
- 点击全屏，界面旋转90度，视频选择180度
bug描述
- IOS系统本地打包生产APP资源后，在苹果手机上运行播放视频后点击全屏，视频先旋转90度，接着整个界面也跟着旋转90度，视频变成了180度倒立播放。基座上运行是正常的。manifest.json也按官方在app-plus中配置了"screenOrientation" : [ “portrait-primary”, “portrait-secondary”, “landscape-primary”,“landscape-secondary” ],
项目信息
| 信息 | 值 |
|---|---|
| 产品分类 | uniapp/App |
| PC开发环境操作系统 | Windows |
| PC开发环境操作系统版本号 | Windows 10 专业版 64 位 |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 3.98 |
| 手机系统 | 全部 |
| 手机厂商 | 华为 |
| 页面类型 | vue |
| vue版本 | vue2 |
| 打包方式 | 离线 |
| 项目创建方式 | HBuilderX |
| App下载地址 | 搜索兴源云下载 |
2 回复
在 Uni-app 中，当你在 iOS 设备上播放视频并点击全屏按钮时，视频的旋转问题可能是由于设备方向和视频的 transform 属性冲突导致的。通常情况下，全屏播放时，视频会自动旋转以适应设备的横屏模式，但如果视频旋转了 180 度，可能是由于某些样式或代码逻辑导致的。
以下是一些可能的解决方案：
1. 检查视频的 transform 属性
确保视频元素没有应用了不必要的 transform 样式，比如 rotate(180deg)。你可以通过检查元素的样式来确认这一点。
video {
transform: none; /* 确保没有旋转 */
}2. 使用 uni-video 组件
Uni-app 提供了 uni-video 组件来处理视频播放。确保你使用的是最新的 uni-video 组件，并且没有自定义的样式或逻辑导致视频旋转。
<uni-video src="your-video-url"></uni-video>3. 监听设备方向变化
你可以通过监听设备方向的变化来手动调整视频的旋转角度。使用 uni.onDeviceOrientationChange 来监听设备方向的变化，并根据需要调整视频的旋转。
uni.onDeviceOrientationChange(function (res) {
if (res.value === 'landscape') {
// 设备横屏时，调整视频的旋转角度
// 例如：videoElement.style.transform = 'rotate(0deg)';
} else if (res.value === 'portrait') {
// 设备竖屏时，调整视频的旋转角度
// 例如：videoElement.style.transform = 'rotate(0deg)';
}
});4. 使用原生插件
如果你需要更精细的控制，可以考虑使用原生插件来处理视频播放和旋转。Uni-app 支持通过原生插件来实现更复杂的功能。
5. 检查全屏按钮的逻辑
如果你自定义了全屏按钮的逻辑，确保在全屏切换时正确处理了视频的旋转和界面布局。
6. 更新 Uni-app 版本
确保你使用的是最新版本的 Uni-app，因为旧版本可能存在一些已知的 bug 或问题。
7. 使用 video 标签的原生属性
如果你直接使用 video 标签，可以尝试设置 playsinline 属性来防止视频在 iOS 设备上自动全屏播放。
<video src="your-video-url" playsinline></video>