Long Video

Overview

This topic uses long video apps as a typical example to detail how the feature of one-time development for multi-device deployment is applied in actual development.

The core of long video apps is immersive playback and user interaction, with main features including video recommendation, video search, video details, comment interaction, and full-screen playback. Based on these core features, the recommendation page, search page, and video details page are used as typical pages for development practice. The development process complies with the differentiation, consistency, flexibility, and compatibility principles, helping you quickly master the capabilities of one-time development for multi-device deployment and develop a long video app.

Currently, this app is compatible with the following devices: bar-type phones, bi-fold devices (Mate X series), tri-fold devices, widescreen foldable devices, tablets, PCs, and Visions.

The following practices will focus on these product forms and provide examples from the perspectives of UX design, project management, and page development, helping you develop long video apps that can be deployed on multiple devices.

• UX Design: describes the interaction logic and common design points of long video apps, which can be directly referenced and reused by developers of similar long video apps.
• Project Management: describes how to build a code project of one-time development for multi-device deployment based on a layered architecture, clearly defining the logic of each layer through a clear directory structure, and provides an appropriate project configuration solution for long video services.
• Mobile Page, PC Page, and Vision Page: describe the design principles and specific implementation methods of window adaptation, page development, interactive development, and function development on mobile, PC, and Vision pages by following the actual app development process, with pages as the basic unit.

UX Design

For details about the UX design of long video apps, see Long Video in Video and Music Applications. The following figure shows the design reference.

Project Management

To improve the reusability and maintainability of the project to implement one-time development for multi-device deployment, it is recommended that developers use a layered architecture to organize code projects. The architecture consists of three layers: products (product customization layer), features (basic feature layer), and common (common capability layer). Each layer has clear responsibilities and independent functions, providing developers with a clear, efficient, and scalable design architecture. For details about the layered architecture design, see Layered Architecture Design.

Project Creation

You are advised to create a template project of a layered architecture after learning how to create and configure such project by referring to Cross-Device Project Deployment and Release. You can then adjust the project based on the actual development requirements of the long video app to ensure that the project architecture aligns with the service scenario.

Project Structure

The long video app uses the recommended layered architecture, organizing the code project into three layers: products, features, and common. The design of each layer is as follows:

• products layer: The long video app needs to be compatible with the following devices: bar-type phones, bi-fold devices (Mate X series), tri-fold devices, widescreen foldable devices, tablets, PCs, and Visions. The UI layouts of Visions and PCs differ greatly from that of other devices. Therefore, HAPs named tv and pc are created separately at the products layer as the app entries of Visions and PCs. The UI layouts of bar-type phones, bi-fold devices (Mate X series), tri-fold devices, widescreen foldable devices, and tablets are similar. Some differences can be adapted through the adaptive layout and responsive layout of one-time development for multi-device deployment. Therefore, a hap named default is created at the products layer as the app entry for these devices.
• features layer: The long video app mainly consists of three core service modules: recommendation (multivideorecommended), search (multivideosearch), and video details (multivideodetail). HAR packages are created at the features layer for the three service modules, which can be referenced by the products layer as required. These service modules are independent of each other, facilitating subsequent maintenance and iteration of the project.
• common layer: To implement code reuse and reduce redundancy, a basic capability HAR package (multivideobase) is created at the common layer. This package encapsulates basic capabilities shared by multiple modules, such as common constants, media playback tools, and window management tools, enabling upper-layer modules to directly call these capabilities.

├──common                                         // Basic feature layer
│  ├──multivideobase/src/main/ets                 // ArkTS source code for basic common capabilities
│  │  ├──constants
│  │  └──utils
│  └──base/Index.ets                              // External export API for basic common capabilities
├──features                                       // Common capability layer
│  ├──multivideorecommended/src/main/ets          // ArkTS source code for the recommendation module
│  │  ├──constants
│  │  ├──model
│  │  ├──utils
│  │  ├──view
│  │  └──viewmodel
│  ├──multivideorecommended/src/main/resources    // Resource files for the recommendation module
│  ├──multivideorecommended/Index.ets             // External export API of the recommendation module
│  ├──multivideosearch/src/main/ets               // ArkTS source code for the search module
│  │  ├──constants
│  │  ├──model
│  │  ├──view
│  │  └──viewmodel
│  ├──multivideosearch/src/main/resources         // Resource files for the search module
│  ├──multivideosearch/Index.ets                  // External export API of the search module
│  ├──multivideodetail/src/main/ets               // ArkTS source code for the video details module
│  │  ├──constants
│  │  ├──model
│  │  ├──utils
│  │  ├──view
│  │  └──viewmodel
│  ├──multivideovideodetail/src/main/resources    // Resource files for the video details module
│  └──multivideodetail/Index.ets                  // External export API of the video details module
└──products                                       // Product customization layer
   ├──default/src/main/ets                        // ArkTS source code for bar-type phones, bi-fold devices (Mate X series), tri-fold devices, widescreen foldable devices
   │  ├──constants
   │  ├──defaultability
   │  ├──model
   │  ├──pages
   │  ├──view
   │  └──viewmodel
   ├──default/src/main/resources                 // Resource files for bar-type phones, bi-fold devices (Mate X series), tri-fold devices, and widescreen foldable devices
   ├──pc/src/main/ets                            // ArkTS source code for PCs
   │  ├──constants
   │  ├──model
   │  ├──pages
   │  ├──pcability
   │  ├──view
   │  └──viewmodel
   ├──pc/src/main/resources                      // Resource files for PCs
   ├──tv/src/main/ets                            // ArkTS source code for Visions
   │  ├──constants
   │  ├──tvability
   │  ├──pages
   │  └──view
   └──tv/src/main/resources                      // Resource files for Visions

Mobile Page

This section describes how to use layout capabilities to adapt a set of pages in the long video app across different devices, such as bar-type phones, bi-fold devices (Mate X series), tri-fold devices, widescreen foldable devices, and tablets. In addition, this section describes the window adaptation solutions for the preceding devices, as well as the interaction and function development of each page.

Window Adaptation

• Window mode

  Long video apps support four window modes on mobile devices: full-screen, split-screen, floating window, and freeform window. For details about the implementation, see Window Mode. The split-screen and floating window modes do not require special design and can be directly accessed through system capabilities. By monitoring window size changes, the app refreshes the UI based on the breakpoints to automatically apply layouts suitable for various window modes.

• Window orientation

  You can set the window orientation using window.setPreferredOrientation() in the app. For details, see Window Orientation. In a long video app, specific window orientation settings are applied only when the user switches to full-screen mode on the video details page. For details about the implementation logic, see Video Details Page & Full-Screen Playback Page. In other scenarios, the app should follow the rotation mode of the home screen. It is recommended that the orientation attribute under the abilities tag in the module.json5 file of the HAP be set to follow_desktop.

• Immersive window

  According to the UX design specifications, the immersive effect needs to be implemented in multiple window modes (full-screen, split-screen, and floating window modes). For details, see Immersive Window. You can implement immersive windows in full-screen, split-screen, and floating window modes using window.setWindowLayoutFullscreen() and dynamically avoid the safe area to ensure a complete display effect.

Recommendation Page

The recommendation page is designed to recommend featured content to meet users' viewing needs. Based on the functional design, the content on the app recommendation page is divided into six areas, as shown in the following figures.

Search Page

The search page responds to user input and displays search suggestions and results. Based on the functional design, the content on the app search page is divided into five areas, as shown in the following figures.

UI development

The search page uses the extension capability of the adaptive layout of one-time development for multi-device deployment and the responsive layout grid system to implement the layout effect at different breakpoints. The following table describes the details and implementation scheme.

In actual development, area 1 is the navigation bar, and areas 2, 3, 4, and 5 are parallel search page content. The development sequence is area 1 and then areas 2–5. To improve user experience on the search page, the page dynamically switches the displayed content based on the user's input in the search box. In this example, the suggested searches and most searched content are displayed by default. When the user enters "Hua", the smart tip list is displayed. When the user enters "Huawei launch event" or selects "Huawei launch event" from the smart tips, the search results are displayed. You can customize the trigger conditions and display styles for suggested searches, most searched content, smart tips, and search results as needed.

Video Details Page

The video details page is mainly used for video playback, comment interaction, and display of related information. Based on the functional differences of the page, it is divided into two parts: commenting-while-viewing page and full-screen playback page.

• Commenting-while-viewing page

The commenting-while-viewing page is mainly used to display video details and provide users with the comment interaction function. Based on the functional design, the content on the commenting-while-viewing page is divided into five areas, as shown in the following figures.

UI development

The commenting-while-viewing page uses the extension and scaling capabilities of the adaptive layout of one-time development for multi-device deployment, as well as the display and hiding control of some components at different breakpoints, to implement layout adaptation at multiple breakpoints. The following table describes the details and implementation scheme.

PC Page

This section describes how to reuse the code logic and layout based on the existing mobile UI development solution to efficiently develop long video apps for PCs. In addition, this section describes the interaction development implementation solution for each page in detail.

Window Adaptation

• Window mode

  Long video apps support full-screen and freeform window modes on PCs. For details, see Window Mode. By monitoring window size changes, the app refreshes the UI based on the breakpoints to automatically apply layouts suitable for distinct window modes, such as the full-screen and freeform window modes modes.

• Immersive window

  According to the UX design specifications, the immersive effect needs to be implemented in both full-screen and freeform window modes. For details, see Immersive Window. In full-screen mode, the immersive effect is implemented by calling window.setWindowLayoutFullscreen(). In freeform window mode, the title bar is hidden by calling window.setWindowDecorVisible(false), and only the three buttons in the upper right corner are retained. In this way, the page content extends to the title bar area, achieving an immersive display effect.

Recommendation Page

The recommendation page on the PC has the same functional positioning as that on the mobile device. Based on the functional design, the recommendation page is divided into six areas, as shown in the following figure.

Search Page

The search page on the PC has the same functional positioning as that on the mobile device. Based on the functional design, the search page is divided into five areas, as shown in the following figures.

UI development

The search page uses the extension capability of the adaptive layout of one-time development for multi-device deployment and the responsive layout grid system to implement the layout effect at different breakpoints.

In actual development, the development sequence of each area on the PC is the same as that on the mobile search page.

Video Details Page

The video details page on the PC has the same functional positioning as that on the mobile device. It can be divided into two parts: commenting-while-viewing page and full-screen playback page.

• Commenting-while-viewing page

Based on the functional design, the commenting-while-viewing page is divided into five areas, as shown in the following figure.

UI development

The commenting-while-viewing page uses the extension and scaling capabilities of the adaptive layout of one-time development for multi-device deployment, as well as the display and hiding control of some components at different breakpoints, to implement layout adaptation at multiple breakpoints.

In actual development, the development sequence of each area on the PC is the same as that on the mobile commenting-while-viewing page.

Vision Page

This section describes how to reuse the code logic and layout based on the existing mobile UI development solution to efficiently develop long video apps for Visions. In addition, this section describes the interaction development implementation solution for each page in detail.

Recommendation Page

The recommendation page on the Vision has the same functional positioning as that on the mobile device. Based on the functional design, the recommendation page is divided into six areas, as shown in the following figure.

Search Page

The search page on the Vision has the same functional positioning as that on the mobile device. Based on the functional design, the search page is divided into five areas, as shown in the following figures.

UI development

The following table describes the details and implementation solution of the search page.

In actual development, areas 1 and 2 are the keyboard input operation areas, and areas 3 to 5 are parallel content on the search page. The development sequence is areas 1 and 2, and then areas 3 to 5. To improve user experience on the search page, the page dynamically switches the displayed content based on the user's input in the search box. In this example, the trending searches and most searched content are displayed by default. When the user enters "H", the search results are displayed. You can customize the trigger conditions and display styles for trending searches, most searched content, and search results as needed.

Video Details Page

The video details page on the Vision is mainly used for video playback and display of related information. Based on the functional design, the content on the video details page is divided into six areas, as shown in the following figures.

UI development

The following table describes the details and implementation solution of the video details page.

In actual development, area 1 displays the main video content, areas 2 to 5 display video-related information, and area 6 displays recommended videos. The three areas are parallel display modules on the video details page. The development sequence is area 1, areas 2 to 5, and area 6.

Interactive development

To ensure consistent interaction experience between the full-screen playback page of the long video app on the Vision and that on the mobile device, the full-screen playback page on the Vision also implements the video playback control interaction function.

• Video playback control

  The long video app adapts to the Vision and supports input devices such as the Ultra remote, Hover touch, focus-moving remote control, keyboard, and mouse. Event processing mechanisms need to be adapted based on the interaction modes of different input devices.

  For example, to implement playback/pause control, the onClick() event is listened for in the video playback area for the Ultra remote, Hover touch, and mouse to control playback and pause. For the Ultra remote and focus-moving remote control, the onKeyEvent event of the OK button is listened for to control playback and pause. For keyboards, the onKeyEvent event of the space key is listened for to control playback and pause. For details about the interaction logic for video playback control, see Sample Code.

Sample Code

• Long Video