苹果ios16 uni-app视频全屏无法退出 app变横版无法竖过来
苹果ios16 uni-app视频全屏无法退出 app变横版无法竖过来
开发环境 | 版本号 | 项目创建方式 |
---|---|---|
Windows | win7 | HBuilderX |
示例代码:
在ios16的手机上打开我的app或者用hbuilderx最新版本编译hello-uniapp 源码安装到ios16的手机上,打开内置组件->多媒体组件->video->播放->全屏
异常就复现
```html
<view class="preview-full" v-if="previewVideoSrc!=''">
<video id="hoonbooVideo" :autoplay="true" :src="previewVideoSrc" :show-fullscreen-btn="true">
<cover-view class="preview-full-close" @click="CloseVideo"> ×
</cover-view>
</video>
</view>
更多关于苹果ios16 uni-app视频全屏无法退出 app变横版无法竖过来的实战教程也可以访问 https://www.itying.com/category-93-b0.html
11-16号 同样是这样的问题,ios版本16.7.2
楼主这个解决了吗
更多关于苹果ios16 uni-app视频全屏无法退出 app变横版无法竖过来的实战教程也可以访问 https://www.itying.com/category-93-b0.html
App平台:3.6.14 以及 手机系统 iOS16 以上video全屏 需要配置应用支持横屏: 在 manifest.json 文件内 app-plus 节点下新增 screenOrientation 配置,设置值为[“portrait-primary”,“portrait-secondary”,“landscape-primary”,“landscape-secondary”]。
回复 jimboy: 我设置了 也不好使,我是在设置了这个后,又在监听了video 的全屏变化事件 onFullScreenChange(e) { // vertical竖屏 horizontal横屏 if (e.detail.direction == ‘vertical’) { // 当在全屏退出时,变成竖屏展示=>修复在ios上退出全屏 还是横屏问题 plus.screen.lockOrientation(‘portrait-primary’) } }, 问题已经成功解决,希望帮助到有类似问题的
回复 jimboy: 这样配置又有了新问题,如果设置了自动旋转,APP也会自动旋转了,APP要锁死竖屏只能配置一个portrait-primary
是昨天发现我这个也是,手机旋转,app跟着变横屏,于是在app.vue 文件里的onlounch里添加跟你一样的
// #ifdef APP-PLUS
plus.screen.lockOrientation(‘portrait-primary’); //锁死屏幕方向为竖屏
// #endif
算是我的问题解决了,但是视频进度条颜色反了,已播放部分的进度条变成灰色,待播放部分的进度条变成白色了。正确应该是已播放是白色,待播放是灰色。不知道怎么弄
这个播放条的颜色,我倒是没有注意,我这边用户量小,先怼上去功能再说,只能说开发app 坑不少
在使用 UniApp 开发 iOS 应用时,如果遇到视频全屏播放后无法退出全屏,或者应用在横屏模式下无法恢复为竖屏的问题,可能是由于以下原因导致的。以下是一些可能的解决方案:
1. 检查 manifest.json
配置
确保在 manifest.json
中正确配置了屏幕方向。例如:
{
"app-plus": {
"screenOrientation": [
"portrait-primary",
"landscape-primary"
]
}
}
2. 使用 plus.screen
API 控制屏幕方向
在 UniApp 中,可以使用 plus.screen
API 来动态控制屏幕方向。例如,在视频播放时强制横屏,播放结束后恢复竖屏:
// 强制横屏
plus.screen.lockOrientation('landscape-primary');
// 恢复竖屏
plus.screen.lockOrientation('portrait-primary');
3. 监听视频全屏事件
在视频播放时,监听全屏事件,并在全屏退出时恢复屏幕方向。例如:
// 监听视频全屏事件
video.addEventListener('fullscreenchange', function() {
if (!document.fullscreenElement) {
// 退出全屏时恢复竖屏
plus.screen.lockOrientation('portrait-primary');
}
});
4. 使用 uni.setScreenOrientation
方法
UniApp 提供了 uni.setScreenOrientation
方法来设置屏幕方向。例如:
// 设置横屏
uni.setScreenOrientation({
orientation: 'landscape'
});
// 设置竖屏
uni.setScreenOrientation({
orientation: 'portrait'
});
5. 检查 iOS 原生配置
确保在 iOS 原生配置中正确设置了屏幕方向。在 Info.plist
文件中,确保 UISupportedInterfaceOrientations
和 UISupportedInterfaceOrientations~ipad
包含了 UIInterfaceOrientationPortrait
和 UIInterfaceOrientationLandscapeLeft
等方向。
6. 使用 video
标签的 playsinline
属性
在 iOS 上,默认情况下视频播放时会自动进入全屏模式。可以通过设置 playsinline
属性来防止视频自动全屏:
<video playsinline></video>