Transparent Video Visual Enhancement Scheme for Front-End Development

This article introduces a self‑developed transparent‑video visual enhancement solution built on a WebView framework by the growth front‑end team. The scheme preserves high visual fidelity while reducing development cost and delivering superior front‑end performance.

Background : As animation becomes increasingly important in app entertainment, traditional solutions such as frame animation, GIF, MP4, Canvas/CSS, and heavyweight animation engines suffer from large file size, lack of transparency, poor quality, or high implementation cost. To address these issues, the industry is moving toward an AFX transparent‑video based front‑end solution.

2.1 Common animation solutions and problems : Frame animation consumes much space; GIF supports only 8‑bit color and looks coarse; MP4 lacks an alpha channel; Canvas/CSS are complex for sophisticated effects; animation engines require high design and development effort.

2.2 Implementation method – Transparent video : Each video frame can be split into RGB channels and an additional alpha channel (0‑255). Since standard MP4 contains only RGB, the solution creates a separate image where the alpha values are stored as RGB, then merges the two images into a symmetric picture. During playback, the alpha information is restored, achieving transparent animation.

2.2.2 Preloading and caching : For the <video> tag, the src attribute can be a network URL or a blob URL generated by URL.createObjectURL . By downloading the video file in advance and storing the blob in IndexedDB, resources can be preloaded and cached. The loading flow is:

const loadVideo = async (path) =>{
    // 下载blob格式的mp4文件
    // 或者从indexdb中获取缓存的视频文件
    return blob;
}
const blob = await loadVideo(path);
path = URL.createObjectURL(blob);

// 设置视频源
video.src = path;

When playing, the system first checks IndexedDB for a cached blob; if present, it is used directly, otherwise the video is downloaded, cached, converted to an object URL, and assigned to the video element.

2.3 Usage flow : Visual designers export After Effects (AE) files as image sequences, then use AFXCreator to merge them into a transparent video. Developers integrate the resulting video with the AFX SDK. Early SDK versions used drawImage and CPU‑based blending, causing high CPU usage and low FPS (~10 fps). Switching to OpenGL compositing raised performance to 30‑60 fps.

Case studies : The solution has been applied in many large‑scale growth activities, including Baidu’s Spring Festival campaigns (over 14 events). Compared with previous methods, a complex high‑fidelity animation now takes ~0.5 day instead of 2 days, improving development efficiency by 75 %. The approach also enables rapid visual prototyping and later replacement with final assets.

Conclusion : The AFX transparent‑video front‑end scheme offers an effective, low‑cost way to achieve high‑quality animations with transparent backgrounds. It delivers small resource size, excellent performance, and is suitable for a wide range of visual enhancement scenarios. Future work will integrate additional techniques such as CSS3 and SVG to further enrich visual effects.