• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Enabling Immersive Full-Screen Video Playback
2
3ArkWeb 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.
4
5When a **Web** component references a video loaded by a third-party HTML5 page and the video is displayed in full screen, the video is extended to the entire **Web** component area and cannot be displayed in full screen, as shown in Figure 2. To achieve the immersive full-screen video playback (as shown in Figure 3), an application needs to listen for the full-screen events and adjust the attributes of other components on the page.
6
7
8| Figure 1 Exiting the full-screen mode| Figure 2 Non-immersive full-screen mode| Figure 3 Immersive full-screen mode|
9| :--------------------------------------------: | :---------------------------------------------: | :---------------------------------------------: |
10| ![web_fullscreen1](figures/web_fullscreen1.png)| ![web_fullscreen2](figures/web_fullscreen2.png) | ![web_fullscreen3](figures/web_fullscreen3.png) |
11
12The **Web** component can use [onFullScreenEnter](../reference/apis-arkweb/arkts-basic-components-web-events.md#onfullscreenenter9) and [onFullScreenExit](../reference/apis-arkweb/arkts-basic-components-web-events.md#onfullscreenexit9) to listen for full-screen button click events. **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 events, you can adjust some global variables based on the specific service scenario, such as the display status and **margin** attribute of the component, to implement the page effect of exiting and entering the immersive full-screen mode, as shown in Figure 1 and Figure 3.
13
14The [visibility](../reference/apis-arkui/arkui-ts/ts-universal-attributes-visibility.md#visibility) attribute is a common component attribute provided by ArkUI. You can control the visibility of a component by setting its **visibility** attribute.
15
16
17```ts
18import { webview } from '@kit.ArkWeb';
19
20@Entry
21@Component
22struct ShortWebPage {
23  controller: webview.WebviewController = new webview.WebviewController()
24  CONSTANT_HEIGHT = 100;
25  @State marginTop: number = this.CONSTANT_HEIGHT;
26  @State isVisible: boolean = true; // Customize the isVisible flag to determine whether to display the component.
27
28  build() {
29    Column() {
30      Text('TextTextTextText')
31        .width('100%')
32        .height(this.CONSTANT_HEIGHT)
33        .backgroundColor('#e1dede') // When isVisible is set to true, the component is visible. Otherwise, the component is invisible, not involved in layout, and no placeholder is used for it.
34        .visibility(this.isVisible ? Visibility.Visible :
35        Visibility.None)
36      Web({
37        src: "http://www.example.com", // Example website
38        controller: this.controller
39      })
40        .onFullScreenEnter((event) => {
41          console.log("onFullScreenEnter...")
42          // 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.
43          this.isVisible = false;
44        })
45        .onFullScreenExit(() => {
46          console.log("onFullScreenExit...")
47          // When the full screen is exited, the isVisible flag is true, and the component is visible.
48          this.isVisible = true;
49        })
50        .width('100%')
51        .height("100%")
52        .zIndex(10)
53        .zoomAccess(true)
54    }.width('100%').height('100%')
55  }
56}
57```
58