Design and Optimization of New Oriental Interactive Video System for Mobile

Network video services have evolved from on‑demand to live and interactive live streaming, with interactive video allowing real‑time audience participation, richer feedback, and content creation, especially valuable for K12 online education.

The article outlines the design of New Oriental's interactive video system on mobile, covering the evolution of requirements and the overall architecture.

1. Design Philosophy and Overall Architecture

1.1 Module Splitting and Design – The system defines functional modules such as playback control (speed, fast‑forward/rewind), protocol handling, node state updates, cross‑node flow, and support for various media types.

1.2 Storyline Axis and Node Flow – Nodes are arranged horizontally on a storyline axis; Base nodes (video, image, audio) carry timeline attributes, while Active nodes support complex jumps, user interactions, and determine subsequent node transitions.

1.3 Mixed Node Design – Active nodes can be native or H5; a bridge communication protocol enables unified control of both types, preserving extensibility.

2. Playback Technology Optimizations

2.1 Video Second‑Play Scheme – Instead of downloading whole scenes, the second‑play approach treats video as segmented ranges served by a local HTTP server that caches data in memory or disk, reducing latency and improving data reuse.

2.2 Node Pre‑Loading – For first‑time playback, nodes are pre‑loaded before they appear on the storyline; linear lists are fully cached, while tree‑structured lists cache only the next level and clean up unused resources.

3. Platform SDK‑Driven Technical Evolution

3.1 SDK Layered Design – The SDK is divided into three layers: Service layer (recording, assessment, data parsing, layout), core playback layer (node transition, caching, control), and Interface layer (decouples internal implementation from business code).

3.2 Packaging and Distribution – SDK binaries are packaged via CocoaPods with extended plugins for remote tag updates and component injection, supporting future extensions.

4. Conclusion

The interactive video system progresses from concept to code, with modular design and SDK encapsulation enabling flexible extensions; future work includes expanding Active nodes to hybrid frameworks like Weex, Flutter, or React Native to balance performance and development efficiency.