目录

Enabling Immersive Full-Screen Video Playback

ArkWeb provides events for entering and exiting the full-screen mode. An application can listen for these events to enter and exit the immersive full-screen mode.

When a video loaded from a third-party H5 page in the Web component is played in full screen, the video expands only to the entire Web component area and cannot be displayed in system full screen (as shown in Figure 2). To achieve the immersive full-screen video playback effect at the system level (as shown in Figure 3), the app must listen for the event of entering the full-screen mode and adjust the attributes of other components on the UI.

Figure 1 Exiting the Full-Screen Mode Figure 2 Non-immersive Full-Screen Mode Figure 3 Immersive Full-Screen Mode

The Web component can listen for the click event of the full-screen button through the onFullScreenEnter and onFullScreenExit callbacks. Specifically, onFullScreenEnter indicates that the Web component enters the full-screen mode, and onFullScreenExit indicates that the Web component exits the full-screen mode. In these two listening events, you can adjust certain global variables based on the specific service scenario, such as the visibility state of components and the margin attribute of components, to achieve the UI effect of exiting and entering the immersive full-screen mode, as shown in Figure 1 and Figure 3.

The visibility attribute is a common component attribute provided by ArkUI. You can control the visibility state of a component by setting different values of the component attribute visibility.

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct ShortWebPage {
  controller: webview.WebviewController = new webview.WebviewController();
  CONSTANT_HEIGHT = 100;
  @State marginTop: number = this.CONSTANT_HEIGHT;
  @State isVisible: boolean = true; // Customize the isVisible flag to determine whether to display the component.

  build() {
    Column() {
      Text('TextTextTextText')
        .width('100%')
        .height(this.CONSTANT_HEIGHT)
        .backgroundColor('#e1dede')
        .visibility(this.isVisible ? Visibility.Visible :
          Visibility.None) // When the isVisible flag is true, the component is visible; otherwise, the component is invisible and does not participate in layout or occupy space.
      Web({
        src: $rawfile('FullScreen.html'), // Example website.
        controller: this.controller
      })
        .onFullScreenEnter((event) => {
          console.info('onFullScreenEnter...');
          // When the full screen is displayed, the isVisible flag is false, the component is invisible, not involved in layout, and no placeholder is used for it.
          this.isVisible = false;
        })
        .onFullScreenExit(() => {
          console.info('onFullScreenExit...');
          // When the full screen is exited, the isVisible flag is true, and the component is visible.
          this.isVisible = true;
        })
        .width('100%')
        .height('100%')
        .zIndex(10)
        .zoomAccess(true)
    }.width('100%').height('100%')
  }
}

FAQs

The following are issues that may occur during full-screen playback.

[h2]How to Switch Between Portrait and Landscape Orientation When Tapping the Full-Screen Button After the Web Component Loads a Video

Symptom

Tapping the full-screen button during video playback enters the immersive full-screen interface, but the screen does not switch to landscape orientation.

Possible Causes

Web component full-screen mode only changes the content layout and does not trigger the app window orientation switch.

Solution

When the Web component enters full-screen mode, the window's portrait and landscape orientation does not change automatically. You need to use the onFullScreenEnter and onFullScreenExit methods of the Web component to listen for the component entry and exit full-screen mode events.

Web({ src:$rawfile("video.html"), controller: this.controller }) // Note: replace it.
  .domStorageAccess(true)
  .expandSafeArea([SafeAreaType.SYSTEM])
  .onFullScreenEnter(() => {
    this.isFullScreen = true;
    this.changeOrientation(true);
  })
  .onFullScreenExit(() => {
    this.isFullScreen = false;
    this.changeOrientation(false);
  })

Use the setPreferredOrientation method provided by Window to set the portrait and landscape orientation.

// Change the device orientation between portrait and landscape.
private changeOrientation(isLandscape: boolean) {
  // Obtain the context information of the UIAbility instance.
  let context: common.UIAbilityContext = this.getUIContext().getHostContext() as common.UIAbilityContext;
  // Call this API to manually change the device orientation between portrait and landscape.
  window.getLastWindow(context).then((lastWindow) => {
    lastWindow.setPreferredOrientation(isLandscape ? window.Orientation.LANDSCAPE : window.Orientation.PORTRAIT);
  }).catch((err: Error) => {
    console.error(`Failed to obtain the window: ${err.message}.`);
  });
}

When customizing the swipe operation, determine whether the current video is in full-screen mode. If it is in full-screen mode, first execute the logic to exit full-screen mode by swiping.

 onBackPress(): boolean | void {
    if (this.isFullScreen) {
      this.isFullScreen = false;
      this.changeOrientation(false);
      return true;
    } else {
      this.getUIContext().getRouter().back();
      return true;
    }
  }

Complete Sample Code:

import { webview } from '@kit.ArkWeb';
import { window } from '@kit.ArkUI';
import { common } from '@kit.AbilityKit';

@Entry
@Component
struct WebVideo {
  controller: webview.WebviewController = new webview.WebviewController();
  @State isFullScreen: boolean = false;

  // Change the device orientation between portrait and landscape.
  private changeOrientation(isLandscape: boolean) {
  // Obtain the context information of the UIAbility instance.
  let context: common.UIAbilityContext = this.getUIContext().getHostContext() as common.UIAbilityContext;
  // Call this API to manually change the device orientation between portrait and landscape.
    window.getLastWindow(context).then((lastWindow) => {
      lastWindow.setPreferredOrientation(isLandscape ? window.Orientation.LANDSCAPE : window.Orientation.PORTRAIT);
    }).catch((err: Error) => {
      console.error(`Failed to obtain the window: ${err.message}.`);
    });
  }

  onBackPress(): boolean | void {
    if (this.isFullScreen) {
      this.isFullScreen = false;
      this.changeOrientation(false);
      return true;
    } else {
      this.getUIContext().getRouter().back();
      return true;
    }
  }

  build() {
    Column() {
      Web({
        src:$rawfile('video.html'), // Replace it.
        controller: this.controller
      })
        .domStorageAccess(true)
        .expandSafeArea([SafeAreaType.SYSTEM])
        .onFullScreenEnter(() => {
          this.isFullScreen = true;
          this.changeOrientation(true);
        })
        .onFullScreenExit(() => {
          this.isFullScreen = false;
          this.changeOrientation(false);
        })
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#000000')
  }
}