Ionic 5+Cordova开发Moodle移动端：视频全屏屏幕旋转管理问题

问题核心 #

iOS的AVPlayerViewController在视频全屏时会接管系统屏幕方向控制，导致Ionic官方Screen Orientation插件失效，退出全屏后WebView与Ionic框架的方向状态不同步，引发UI错乱。

可行解决方案 #

通过监听视频全屏切换事件，结合原生Cordova方向控制API，在全屏阶段锁定方向，退出后恢复并强制同步UI状态：

1. 监听视频全屏事件
   在页面组件中绑定视频元素的webkitfullscreenchange事件（iOS专属全屏切换事件），跟踪全屏状态变化。

2. 全屏阶段锁定方向
   进入全屏时，记录当前的方向锁定设置，然后用原生Cordova API锁定当前设备方向（绕过Ionic插件的失效问题）。

3. 退出全屏后恢复并同步UI
   退出全屏时，恢复原方向锁定设置，手动触发orientationchange事件让Ionic重新计算布局，同时触发Angular变更检测确保UI更新。

代码示例 #

import { Component, ElementRef, ViewChild, ChangeDetectorRef } from '@angular/core';
import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';

@Component({
  selector: 'app-video-view',
  templateUrl: './video-view.page.html',
  styleUrls: ['./video-view.page.scss'],
})
export class VideoViewPage {
  @ViewChild('moodleVideo') moodleVideo: ElementRef;
  private originalOrientationLock: string;

  constructor(
    private screenOrientation: ScreenOrientation,
    private cdr: ChangeDetectorRef
  ) {}

  ngAfterViewInit() {
    const videoElement = this.moodleVideo.nativeElement;
    // 监听iOS全屏切换事件
    videoElement.addEventListener('webkitfullscreenchange', () => {
      if (document.webkitIsFullScreen) {
        // 进入全屏：记录原锁定方向，锁定当前方向
        this.originalOrientationLock = this.screenOrientation.type;
        const currentOrientation = this.screenOrientation.type;
        // 使用原生Cordova API锁定，避免Ionic插件失效
        (window as any).screen.lockOrientation(currentOrientation);
      } else {
        // 退出全屏：恢复原方向锁定
        (window as any).screen.unlockOrientation();
        this.screenOrientation.lock(this.originalOrientationLock);
        // 强制触发方向变更事件，同步Ionic布局
        window.dispatchEvent(new Event('orientationchange'));
        // 触发Angular变更检测，修复UI渲染问题
        this.cdr.detectChanges();
        // 可选：重置页面滚动位置，避免布局偏移
        window.scrollTo(0, 0);
      }
    });
  }
}

配置补充 #

确保config.xml中正确配置方向权限：

<!-- 默认竖屏，允许临时方向变更 -->
<preference name="Orientation" value="portrait" />
<allow-orientation-changes />

关键注意点 #

• 必须依赖cordova-plugin-screen-orientation插件（Ionic的Screen Orientation插件基于此封装），确保已正确安装：

  cordova plugin add cordova-plugin-screen-orientation
  

• iOS上仅支持webkitfullscreenchange事件，无需监听标准fullscreenchange事件。

内容的提问来源于stack exchange，提问作者Aldo Fernando Saia