Build a Powerful Open‑Source Short‑Video App that Generates Revenue and Runs on Mobile, Mini‑Program, and Web

Introduction

The author, a programmer, notes the booming short‑video market and recent trends such as blind‑box monetization, citing examples of developers earning six‑figure revenues from related mini‑programs.

Core Functional Requirements

Short‑Video Resource Library

Massive collection of legitimate vertical short videos (1‑10 min per episode)

Clear categories (romance, revenge, time‑travel, etc.)

Resolution switching (720p/1080p)

Immersive Player

Gesture control for progress, volume, brightness

Variable speed playback (0.5x‑3.0x)

Real‑time danmu/comments

Auto‑play and pre‑load next episode

User Experience & Interaction

Personalized Recommendation

Infinite scroll home page similar to Douyin

Smart algorithm based on watch history and preferences

"Follow‑up" feature with update reminders

Multi‑Mode Viewing

Single‑episode watch

Full‑series continuous play with auto‑skip of intros/outros

Interactive Features

Like, favorite, share to social media

Discussion area per episode

User‑generated content (UGC) comments and reviews

User & Social System

User System

Phone number or third‑party (WeChat/Weibo) one‑click login

User level and achievement system

Social Interaction

Follow other viewers

Private chat

Watch ranking lists (hot, new)

Creation Incentives

User‑uploaded short videos

Creator backend and management tools

Commercial Features

Payment Models

Single‑drama purchase

Membership subscription (partial or full free)

Virtual currency (coins/diamonds) recharge and spend

First few episodes free, later episodes unlockable

Advertising System

Rewarded video ads (e.g., "watch ad to unlock episode")

Feed ads

Brand‑customized short dramas

Points & Tasks

Daily sign‑in and watch tasks earn points

Points redeemable for coupons or free episodes

Technical Stack – Frontend

Immersive Player

Video framework: ExoPlayer (Android), AVPlayer (iOS), or cross‑platform react-native-video / Flutter Gesture interaction: listen to swipe gestures, compute offset, adjust brightness/volume/progress

Danmu system: Canvas/WebGL rendering, real‑time socket, anti‑occlusion and speed control

Mini‑program: use <video> component; limited capabilities, custom overlay needed for gestures

Seamless Browsing

Infinite scroll implementation: FlatList (React Native), RecyclerView (Android), UICollectionView (iOS) for list reuse and next‑video pre‑load

State retention: preserve playback position, volume, brightness when switching episodes

Payment & Unlocking

App in‑app purchase: Apple IAP, Google Play Billing

Mini‑program payment: WeChat Pay, Alipay

Virtual currency: front‑end maintains local balance, backend validates every consumption

Offline & Caching

Smart cache: auto‑cache upcoming episodes on Wi‑Fi based on user preference and watch history

Cache management: clear space, Wi‑Fi‑only caching; encrypted files for copyright protection

Cross‑Platform Framework Choice

Option A – Native development: best performance, highest UX, but high three‑platform cost

Option B – Cross‑platform: React Native / Flutter for a single codebase, but core components (player) need deep customization

Mini‑program: use Taro or Uni‑app to share business logic with the app

Technical Stack – Backend

Video Service

CDN integration (Alibaba Cloud, Tencent Cloud, AWS CloudFront) for video chunk distribution and dynamic bitrate

Video processing with FFmpeg for transcoding, thumbnail generation, watermarking

Anti‑hotlink: URL token, referer whitelist/blacklist, IP limits

Business & API

Microservice architecture (Spring Cloud, Go‑Micro) separating user, order, video, interaction services

API design: RESTful + WebSocket for real‑time danmu/comments

Core logic: episode unlock verification, membership validation, watch‑progress sync

API gateway for unified management, rate limiting, authentication

Data & Recommendation

User profiling: collect watch duration, drop points, payment points

Recommendation: start with collaborative filtering, later introduce deep‑learning models (e.g., YouTube DNN)

Data analysis: Flink/Spark for real‑time analytics (hot‑list), ELK stack for operational dashboards; cold‑start via hot list and editorial picks

Payment & Order

Unified payment gateway abstracting WeChat, Alipay, Apple, Google

Order reconciliation task to ensure payment callback and local order status consistency

Anti‑fraud: detect abnormal IPs, frequent payment behavior

Content Management Backend

Admin framework: Ant Design Pro, Element UI for rapid UI building

Audit workflow: third‑party content‑security APIs (Alibaba, Tencent) for automated review plus manual moderation

Features: batch upload, episode management, data statistics

Core Technical Challenges & Solutions

High Concurrency & Performance – Challenge: massive simultaneous video requests during peak hours. Solution: CDN + edge computing, stateless API horizontal scaling.

Playback Smoothness & First‑Frame Time – Challenge: user churn linked to buffering. Solution: video pre‑loading plus adaptive multi‑bitrate streaming.

Copyright Protection & Anti‑Piracy – Challenge: illegal download and screen‑recording. Solution: HLS encryption, DRM, front‑end screen‑record detection with warnings.

Cross‑Platform Data & State Sync – Challenge: resume playback when switching between app and mini‑program. Solution: unified user‑ID system with backend‑centralized storage of progress, favorites, etc.

Mini‑Program Limitations – Challenge: limited pre‑loading, package size, single payment channel. Solution: position mini‑program as acquisition, lightweight experience, and social sharing channel; guide complex features to the native app.

Demo & Scaffold Distribution

The complete scaffold is available; interested readers can obtain it by replying "私活脚手架" to the public account (note: this is a different account from the author’s).