How Youku Optimized Video Playback for Foldable Phones: A Technical Deep Dive

Background

Foldable phones have become a significant segment of the mobile market, offering larger screens while retaining portability. Forecasts from five research firms show a slowdown in traditional slab‑phone shipments and a rapid rise in foldable device sales, indicating growing consumer migration to foldables.

Youku, a leading Chinese video platform, recognized the need to enhance the viewing experience on these devices and began exploring how to adapt its apps for foldable screens.

Optimization Directions

Based on research, Youku identified three main goals:

Fully exploit foldable characteristics by enhancing playback through the OnePlayer framework.

Leverage responsive layout techniques to improve content distribution efficiency on larger screens.

Strengthen collaboration with device manufacturers to integrate new system features for a superior experience.

Solution Design

The guiding principle is “Content is like water”: a single codebase should adapt fluidly to various screen sizes and device types. Youku extended its responsive SDK to support foldable devices, abstracting an adaptation layer and a layout‑management layer. The SDK first prefers manufacturer‑provided foldable solutions, then falls back to Google’s Jetpack implementation, presenting a unified API to upper‑level business logic.

Effect Demonstration

1. Home‑page distribution efficiency – The home screen adopts a 1+N interleaved grid layout that provides an immersive large‑screen experience when unfolded, while preserving the familiar phone‑side experience when folded.

2. Playback column layout – Recommendations appear on the right side, allowing users to see personalized content without scrolling, and enabling seamless control in both half‑screen and full‑screen modes.

3. Hover‑mode playback – In the folded state, the lower screen hosts playback controls while video plays on the upper screen, mimicking a small computer and adding new interactions such as volume and brightness adjustments.

4. Search column layout – The search page splits “Related Searches” and “Hot Searches” into persistent sidebars, taking advantage of the larger screen to simplify navigation and boost content distribution.

Technical Implementation

1. Hover Mode – Foldable devices are categorized into four types:

Outward‑fold (e.g., Huawei Mate X)

Inward‑fold without hover (e.g., Xiaomi Fold 2)

Inward‑fold with hover (e.g., OPPO Find N2)

Flip‑type (e.g., OPPO Find N2 Flip)

The OnePlayer architecture treats each feature as a plugin. Plugins declare their display mode for folded states (upper‑screen only, lower‑screen only, or full‑screen), and the foldable‑screen SDK notifies OnePlayer of posture changes, prompting layout refreshes.

2. Column Mode – Servers tag components with a foldable‑screen flag. The client detects screen posture changes, splits and filters data accordingly, and renders the appropriate column layout.

3. Data Targeting – For components that do not adapt well, a data‑targeting strategy is applied, allowing distinct card designs or layout tweaks specifically for foldable devices.

4. Operation Targeting Strategy – API request parameters now include a field distinguishing device types (phone, pad, foldable). This enables operations teams to easily select which devices receive targeted features.

Outlook

Traditional slab phones are reaching a growth ceiling, while foldable devices are poised for rapid expansion. Current efforts focus on foundational experience adaptations, with innovative playback modes like “parallel cool view” already implemented. Future work may include gesture‑based controls, free‑view angle adjustments, and integrated text/chat features that treat the foldable as a mini‑computer.