Technical Architecture and Implementation of iQIYI Cloud Video Editing Platform

Cloud Editing (云剪辑) is an online video production platform that integrates video creation, production, and distribution. It provides both tool capabilities (multi‑track audio/video composition, trimming, cutting, drag‑and‑drop, subtitles, graphics, and audio editing) and service capabilities (business APIs for video creation, transcoding, distribution, and status queries).

The rapid development of Web technologies, especially HTML5, enables browsers not only to render rich interfaces but also to manipulate streaming media. Compared with desktop editing software, the cloud solution reduces client‑side performance requirements by offloading transcoding to the cloud and improves overall efficiency.

Main functional features include basic video cutting and splicing, track scaling and drag‑and‑drop interaction, subtitle/graphic overlay, real‑time effect preview, and online transcoding. The first four functions run entirely in the browser, presenting several technical challenges:

Implementing WYSIWYG playback in the browser.

Managing high resource consumption while maintaining smooth interaction.

Ensuring that client‑side effects (e.g., filters, overlays) stay consistent with server‑side processing.

System Architecture – The platform is divided into four layers (see Fig. 2):

Web client: Handles user interaction, material import, editing, and real‑time preview.

Node middle layer: Acts as a bridge between front‑end and back‑end, aggregating APIs, temporary data storage, and ensuring data consistency.

Creation middle platform: Provides core video production services such as editing, transcoding, and distribution.

Cloud platform: Supplies foundational services like transcoding, storage, and CDN delivery.

Real‑time preview technology uses multiple video player instances combined in a relay fashion. Each player instance renders a segment; the combined output is projected onto a canvas, enabling seamless preview of cut, splice, and effect operations (Fig. 4). To address playback order and resource readiness, video instances are organized into groups:

Different groups handle pre‑loading, projection, and conversion.

A dedicated cache group stores recently used data to reduce latency during seeks.

These grouping and caching strategies improve compatibility, stability, memory usage, and playback smoothness.

Track implementation – The editing track is built as a customizable component hierarchy (Fig. 9). It supports various track types (video, audio, graphics, effects) and provides a unified data store for undo/redo across the entire application.

Node middle layer is built on the self‑developed qiyi-wings framework, extending Koa2 with clear layers: router → controller → service → model → dao. This separation enhances maintainability and allows front‑end developers to receive tailored API responses without worrying about back‑end data formats.

Front‑end stack – The client is a single‑page application built with Vue.js and the internal QUI2.0 component library. The codebase follows a modular structure (project, material, track, video, decorator, forms) with Vuex stores for centralized state management (Fig. 13). Data flow between front‑end and back‑end is illustrated in Fig. 14.

Conclusion and future work – By structuring code layers, enforcing strict process control, and designing fine‑grained interactions, the platform achieves complex audio‑video editing in the browser. Ongoing improvements include adopting WebAssembly for decoding/computation, integrating AI for video enhancement, and eventually opening the service to external creators.