苹果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

9 回复

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 坑不少

只能是在竖屏的时候启动APP才有效,如果一开始手机横屏,启动APP,最后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 文件中,确保 UISupportedInterfaceOrientationsUISupportedInterfaceOrientations~ipad 包含了 UIInterfaceOrientationPortraitUIInterfaceOrientationLandscapeLeft 等方向。

6. 使用 video 标签的 playsinline 属性

在 iOS 上,默认情况下视频播放时会自动进入全屏模式。可以通过设置 playsinline 属性来防止视频自动全屏:

<video playsinline></video>
回到顶部