Design and Implementation of Baidu Baijiahao Online Video Editor

The rapid growth of mobile internet and the 5G‑driven video wave have created a strong demand for simple, web‑based video creation tools. Baidu's Baijiahao team built an online video editor that integrates directly into the Baijiahao content‑creation platform.

Key functional requirements include material management, multi‑track editing, drag‑and‑drop operations, audio‑video track separation, effects (e.g., emboss, retro), transitions, subtitles, preview, and multi‑format export. The online version adapts these features for web use: material upload/delete, JavaScript‑based preview, and a publishing‑oriented export that does not generate a local video file but feeds the result into Baijiahao’s publishing pipeline.

Backend technology stack

FFmpeg is used as the core encoding/decoding engine because of its rich filter set, high performance, and open‑source nature. The backend service, written in PHP, translates a front‑end timeline JSON into executable FFmpeg command lines.

Typical FFmpeg commands:

ffmpeg -i in.wmv -vcodec libxvid out.mp4

ffmpeg -framerate 1 -t 1 -loop 1 -i "http://example.com/image.jpeg" -vcodec libx264 -pix_fmt yuv420p -y test.mp4

Common filters and their usage:

Scale: ffmpeg -i video_1080p.mp4 -vf scale=w=640:h=360 video_360p.mp4

Zoompan (dynamic zoom/pan): ffmpeg -framerate 1 -t 1 -loop 1 -i "http://example.com/image.jpeg" -vf "zoompan=z='if(eq(on,0),1,if(lt(zoom,1.25),zoom+0.0005,1.25))':d=16.06*25:x='if(lt(zoom,1.25),0,(x-1))':y='if(lt(zoom,1.25),0,(y+1))':s='1024x720'" -y tmp.mp4

Boxblur: ffmpeg -i tmp.mp4 -filter_complex "boxblur=luma_radius='min(h,w)/30':luma_power=2" -y boxblur.mp4

Overlay (transition): ffmpeg -i tmp.mp4 -i watermark.png -filter_complex "[1:v]scale=-2:48[logo];[0:v][logo]overlay=48:48" -y watermark.mp4

FFmpeg filter pipelines are built using a naming convention ([name]) and commas to separate filters, semicolons to separate streams. Example pipeline (simplified):

-filter_complex "[0:v]split[front][back];[back]scale=1280:-2,boxblur=luma_radius='min(h,w)/30':luma_power=2,crop=iw:720[background];[front]scale=-2:720[foreground];[background][foreground]overlay=(W-w)/2:(H-h)/2"

Front‑end technology

The UI is built with React. Simple preview is achieved with the HTML5 video element, and basic visual effects (negative, emboss, grayscale) are applied by passing parameters to the player. Because of performance limits, the preview only shows a subset of the final effects.

Timeline data structure

A JSON object describes video, audio, subtitle, and watermark tracks. Each track entry contains start/end times, type, dimensions, effects, source URLs, and optional parameters such as auto‑subtitle. Example (truncated):

{
  "timeline": {
    "video_track": [{
      "start": 0.0,
      "end": 1.5,
      "type": "video",
      "height": 720,
      "width": 1280,
      "in_effect": "fade_in",
      "out_effect": "fade_out",
      "style": "negative",
      "duration": 1.5,
      "speed": 1,
      "animation": "zoompan",
      "sourceUrl": "http://example.com/video.mp4"
    }],
    "audio_track": [{
      "start": 0.0,
      "end": 1.5,
      "type": "audio",
      "in_effect": "fade_in",
      "out_effect": "fade_out",
      "style": "jazz",
      "duration": 1.5,
      "speed": 1,
      "sourceUrl": "http://example.com/audio.mp3",
      "auto_subtitle": true
    }]
  }
}

Backend processing flow

1. The front‑end sends the timeline JSON to the Service layer. 2. The Service module translates the timeline into a series of FFmpeg commands and uploads filter scripts and subtitle files to Baidu Object Storage (BOS). 3. A distributed task scheduler called Dispatch picks up the job, balances load across instances via Redis‑based registration, and executes the FFmpeg pipeline. 4. The resulting video is stored in BOS/VOD and the Service layer is notified of completion.

The Dispatch architecture uses a Redis hash where each instance registers its IP and current queue length. When a request arrives, the instance with the shortest queue processes it, otherwise the request is forwarded to the optimal instance.

Extensions and related projects

The same backend is reused for a “text‑to‑video” project that converts article URLs into a series of scenes (image + text) and then reuses the editor’s pipeline. Collaboration with Baidu Media Cloud led to the “Intelligent Video Quick‑Compile” service, which adds GPU‑accelerated encoding and advanced features while reusing the core pipeline.

Conclusion

The Baijiahao online video editor demonstrates how existing open‑source tools (FFmpeg), standard web technologies (React, PHP), and a lightweight distributed scheduler can be combined to deliver a production‑grade video creation service without inventing new algorithms. The architecture is intentionally simple, making it easy to share and evolve within Baidu’s ecosystem.