Technical Deep Dive of the “Cool Watch” Mode Behind “The Longest Day in Chang’an”: Player Framework, Dynamic Rendering, and Multi‑Screen Synchronization

Technical analysis of the technologies behind the TV series “The Longest Day in Chang’an” (《长安十二时辰》). Alibaba Entertainment experts share their core capabilities.

The discussion covers the entertainment brain “Beidou Star” for storyline analysis, the interactive “Cool Watch” experience, anti‑theft‑link mechanisms, AI‑driven high‑resolution playback, and the media‑asset middle‑platform architecture supporting the entire Youku site.

Audio‑Video Technology – High‑Energy Content

Mobile “Cool Watch” mode uses multi‑stream same‑screen display, intelligent smooth switching, precise synchronization, and dynamic rendering. Core capabilities include dynamic rendering, parent‑child screens, and multi‑stream frame‑level synchronized playback.

1. Player Business Framework

The player framework is built on a simple, elegant model where playback functionality is composed of independent plugins. This decouples business logic, enables parallel development, and aligns team organization with technical architecture.

1.1 Player View Model

The model consists of:

1) Multiple layers composing the player.

2) Layout plugins within layer containers.

3) Player message publishing.

4) Plugins subscribing to messages.

5) Layer and plugin configurations loaded from files.

2. Core Features

• Message‑driven, event‑based architecture.

• On‑demand configuration and free composition via XML files.

• Plugin decoupling with message‑based communication.

• Clear standards with extensible plugin sets.

• Support for multiple player instances co‑existing on a single page.

3. Business Development Impact

• Open architecture enables independent, plug‑in‑based customization.

• Standardized plugin design improves cross‑team collaboration.

• Service‑oriented playback capabilities allow downstream reuse (e.g., OTT libraries).

2. Cool Watch Encyclopedia

Provides on‑screen encyclopedia‑style content to assist viewers. Requirements:

• Operational: configurable via backend without code releases.

• User‑experience: dynamic UI styles adapting to user preferences and video content.

Implementation uses Alibaba’s open‑source Weex for dynamic UI rendering, combined with backend targeting to inject components based on templates.

3. Sub‑Screen (Parent‑Child Screen) Architecture

The “parent‑child screen” splits the device area into a main (parent) screen for the primary video and a smaller (child) screen for auxiliary or interactive content.

Key ideas:

• Decouple parent and child resources for independent operation.

• Avoid hard‑coded multiplexed streams, enabling dynamic, preference‑based content delivery.

• Provide interactive capabilities on both screens, with gesture handling via a dedicated hand‑gesture plugin.

4. Dual‑Stream Synchronized Playback

Two approaches were considered:

1) Single player instance handling both streams.

2) Two separate player instances, each with its own context.

The dual‑instance solution was chosen for clearer master‑slave relationships and simpler engineering.

Challenges addressed:

• Systemic error accumulation across production, operation, and playback pipelines.

• Limited precision of player APIs (start, pause, seek, speed) for sub‑40 ms synchronization.

• Device fragmentation and runtime randomness on Android.

Solutions include:

• Anchor synchronization to the main video timeline (audio, video, or external clock).

• Recursive “adjust‑feedback‑correct” loops with precise seek APIs.

• Statistical compensation for frame‑level drift, adaptive buffering, and speed‑curve training.

These combined architectural, engineering, and algorithmic improvements achieve accurate multi‑stream synchronization.

Result: The “Cool Watch” mode delivers an immersive, interactive viewing experience, showcasing Alibaba’s accumulated core video‑playback technologies.