管理中心
我的
您当前正在浏览新版开发者文档中心,目录分类和层级有所调整。点击左侧当前文档分类名称前的“☰”图标,可切换文档分类。 了解新版目录
问题处理与运维开发与测试问题多设备场景手机三折叠常见问题三折叠设备横屏播放视频时退出全屏,无法回归竖屏显示

三折叠设备横屏播放视频时退出全屏,无法回归竖屏显示

问题现象

三折叠设备,应用从单屏展开到三屏再折叠回单屏,点击视频全屏后,横屏播放,退出视频全屏,应用页面无法回归竖屏显示。

背景知识

  • module.json5文件内的abilities标签下的orientation字段可配置应用启动时的屏幕方向。
  • 代码中调用setPreferredOrientation接口,可改变屏幕方向,注意窗口将一直保持最后一次设置窗口方向的效果,因此在退出需要改变方向显示的内容页面时需要重新调用此方法恢复屏幕方向。

问题定位

  1. 查阅代码中module.json5文件内的abilities标签下的orientation字段的值,例如下面设置应用启动方向为竖屏显示。
    收起
    自动换行
    深色代码主题
    复制
    1. "abilities": [
    2. {
    3. "orientation": "portrait",
    4. }
    5. ]
  2. 查阅代码中是否调用setPreferredOrientation接口改变了屏幕方向,例如下面设置屏幕方向为横屏。
    收起
    自动换行
    深色代码主题
    复制
    1. this.windowStage?.getMainWindow((err: BusinessError, data: window.Window) => {
    2. if (err.code) {
    3. return
    4. }
    5. data.setPreferredOrientation(window.Orientation.LANDSCAPE)
    6. })

分析结论

应用代码中调用了setPreferredOrientation接口改变了屏幕方向,但是退出页面时没有进行方向恢复,导致该场景下,进入页面屏幕方向被改成了横向,退出页面没有进行方向恢复,造成了三屏折回单屏,全屏横向播放视频退出后,屏幕依然是横向。

修改建议

检查setPreferredOrientation接口调用处的代码逻辑,保证所有用例场景下,如果有修改屏幕方向的代码:setPreferredOrientation(window.Orientation.LANDSCAPE),就需要有屏幕方向恢复的代码:setPreferredOrientation(window.Orientation.PORTRAIT)。

收起
自动换行
深色代码主题
复制
  1. import { window } from '@kit.ArkUI';
  2. @Entry
  3. @Component
  4. struct VideoOrientation {
  5. @State videoSrc: Resource = $rawfile('example.mp4'); // 实际开发替换为实际视频资源
  6. @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X;
  7. private isAutoPlay: boolean = true;
  8. private showControls: boolean = true;
  9. private isShortcutKeyEnabled: boolean = false;
  10. controller: VideoController = new VideoController();
  11. build() {
  12. Column() {
  13. Video({
  14. src: this.videoSrc,
  15. currentProgressRate: this.curRate, // 设置播放速度
  16. controller: this.controller,
  17. })
  18. .width('100%')
  19. .height(600)
  20. .autoPlay(this.isAutoPlay)
  21. .controls(this.showControls)
  22. .enableShortcutKey(this.isShortcutKeyEnabled)
  23. .onFullscreenChange((e?: FullscreenObject) => {
  24. if (e !== undefined) {
  25. if (e.fullscreen === true) {
  26. window.getLastWindow(this.getUIContext().getHostContext(), (err, data) => { // 获取window实例
  27. const errCode: number = err.code;
  28. if (errCode) {
  29. console.error(`Failed to obtain the main window. Cause code: ${err.code}, message: ${err.message}`);
  30. return;
  31. }
  32. let windowClass = data;
  33. windowClass.setPreferredOrientation(window.Orientation.LANDSCAPE);
  34. });
  35. } else {
  36. window.getLastWindow(this.getUIContext().getHostContext(), (err, data) => {
  37. const errCode: number = err.code;
  38. if (errCode) {
  39. console.error(`Failed to obtain the main window. Cause code: ${err.code}, message: ${err.message}`);
  40. return;
  41. }
  42. let windowClass = data;
  43. windowClass.setPreferredOrientation(window.Orientation.PORTRAIT);
  44. });
  45. }
  46. }
  47. });
  48. };
  49. }
  50. }
  51. interface FullscreenObject {
  52. fullscreen: boolean;
  53. }