How to Adapt a Video Player for Foldable Screens: The OnePlayer Case Study

Background

The previous article introduced the development trends, form factors, and SDK implementation of foldable screens. Building on that, this piece focuses on adapting the video player for foldable devices, addressing both fullscreen and non‑fullscreen states and ensuring a smooth user experience.

Overall Effect

Two modes are compared:

Non‑fullscreen mode: Traditional single‑column layout leads to large empty areas and inconvenient controls when the screen is unfolded.

Fullscreen mode: A new control scheme places playback controls in the lower half of the screen, allowing gestures without obscuring the video.

Side‑by‑side screenshots (omitted here) illustrate the visual improvements.

Solution Implementation

The implementation relies on Youku’s OnePlayer framework, which supports dynamic plugin insertion and configuration. Plugins are categorized into three groups:

Plugins unaffected by the hover state (e.g., fast‑forward hints).

Plugins always displayed in the lower half (e.g., control bar).

Plugins that react to the hover state and may appear at the top or bottom (e.g., video container, episode selector).

Configuration for the hover state is added via XML, for example:

<!-- Foldable‑screen control, only show in bottom half -->
<plugin name="player_foldscreen_control">
    <param name="fold_layer_position" value="only_bottom"/>
</plugin>

Plugin Container Position Adaptation

OnePlayer’s root layout is a FrameLayout that fills the screen. Adaptation is achieved by adjusting the top or bottom margin of each plugin view based on its category:

Category 1: No margin changes; the plugin remains unchanged.

Category 2: When the hover state changes, set MarginTop to the distance from the screen midpoint to the top, effectively moving the plugin to the lower half.

Category 3: Listen to hover‑state events; in hover mode set MarginTop to the height of the upper screen, and restore it to zero when the device is fully unfolded.

The overall flow is illustrated in the accompanying diagram (image omitted).

Scenario Landing

The hover‑state solution delivers the best user experience with minimal development cost. Collaboration with device manufacturers also generated business value and served as a selling point for partner devices.

Testing Chapter

Since 2018, multiple manufacturers have released foldable phones. Adapting to these devices involves two main challenges: diverse form factors and limited testing resources. The article outlines a systematic approach:

Identify device‑specific capabilities (e.g., Oppo’s hover mode, internal vs. external fold).

Define continuity, readability, and operability criteria for UI transitions.

Classify UI components and apply appropriate layout strategies (multi‑column, split‑screen, tab stretching, etc.).

Specific UI adaptations include:

Home page: Responsive stretching using Design Tokens.

Feed cards: 1+N staggered grid layout for large screens.

Search page: Sidebar split‑layout for related and hot searches.

Playback page: 6:4 dual‑column layout with Guideline‑based proportioning.

Danmaku (bullet comments): Constrained to black‑border area, reducing line count.

Live room: Immersive video page that utilizes full width without entering fullscreen.

Future Outlook

Foldable screens are still in the early adaptation stage. Future directions include gesture‑only controls in hover mode, integrating advanced playback modes such as free‑view angles, and enabling text input/chat on the lower screen while watching video on the upper screen.