How Same‑Layer Rendering Powers Alibaba’s H5 Video Player for 618 Live Events

Background

PHA framework’s excellent performance led many businesses to adopt H5, but native H5 video players could not meet stability, performance, and capability requirements for short‑video/live streams, prompting the need for a smooth H5 player.

Same‑Layer Rendering Player Design

Same‑layer rendering mixes native components and WebView DOM elements, ensuring identical rendering hierarchy, scrolling feel, and touch events. It was chosen for its balanced performance, stability, ease of use, and flexibility.

The underlying native player has a mature API and stable performance, meeting business standards after years of development.

A same‑layer rendering component wraps the native player for use in iOS WKWebView and Android UC kernels, listening to creation/destruction events via a communication layer that notifies the client when an

<object />

node appears.

The business‑level player uses

@ali/rax-composite-view-factory

to render

<object />

nodes; when rendered, the front‑end notifies the listener, which then instructs the client to instantiate or destroy the player (iOS via

element.addEventListener

, Android via WindVane).

Videoplus Component

Videoplus unifies playback across environments, providing a single API for live and on‑demand scenarios. It supports:

Playback scenario flattening – different scenes use the same player, with the 618 promotion adding same‑layer rendering support.

Weex – uses the weex‑based native player.

Taobao H5 – uses the same‑layer rendering player.

External web – uses videox.js.

Standardized event, attribute, and listener handling that follows W3C video API, reducing integration effort.

Splayer Layer

Splayer is a business‑level wrapper on Videoplus, handling complex interaction scenarios such as list, carousel, tab, and header modes. It ensures a single player instance to avoid OOM, synchronizes across modules via a unique SplayerEmitter, and provides extensive event listeners for scroll, specific‑id playback, and appear/disappear handling.

Stability Assurance

Videoplus offers multi‑dimensional downgrade capabilities configured via Taobao MT, including full downgrade to a poster, scene‑specific downgrade for H5/Weex/PHA, and business‑specific, client‑version, and OS‑version controls.

618 Promotion Results

More than six 618 modules (industry, live 1x2, recommendations, header images, etc.) integrated the player, serving over 200 venues. Technical metrics showed a success rate above 99%, zero new crashes, no failures, and smooth gray‑scale rollout.

Issues Encountered

Removing the

<object />

node caused PHA tab switches to suspend WebView, leaving player instances alive; the fix was to listen for PHA page disappear events and forcefully stop and destroy the player.

Splayer’s rapid video switching in 1x2 modules caused delayed disappearance animations and white screens; the solution was to adjust the timing of the native player’s cover image removal.

Future Plans

Continue to lower integration thresholds, create H5 live rooms matching native experiences, improve playback to boost GMV, and develop interactive live‑stream games.

Same‑layer rendering will drive multimedia business growth by enhancing playback experience and interaction capabilities.