AUI Kits for mini-drama scenarios provide local caching, intelligent preloading, pre-rendering, and automatic PiP episode switching based on the MediaBox SDK. Integrate these modular components to deliver instant full-screen playback.
Download the Demo
|
Platform |
Demo |
|
Android/iOS |
|
|
Flutter |
|
Open the application and choose VOD Scenarios > Short Dramas.
Prerequisites
Understand the following concepts before proceeding:
What is a Low-Code Suite?
A low-code integration suite is a set of pre-packaged modules — players, lists, and Feeds streams — that developers select and configure to build applications without coding from scratch.
Scenario Overview
AUI Kits are a low-code integration suite from Alibaba Cloud based on the MediaBox audio and video SDK. They integrate local caching, intelligent preloading, intelligent pre-rendering, and automatic episode switching during picture-in-picture playback for audio and video scenarios such as mini-dramas. Key features:
-
Low-code integration
Modular architecture lets developers select and customize components — list playback, episode lists, and Feeds streams — shortening development cycles and reducing costs.
-
Optimal playback experience
Local caching, intelligent preloading, and intelligent pre-rendering achieve instant full-screen playback with no stuttering or black screens. Multiple AliPlayer instances ensure smooth switching, and automatic episode switching during picture-in-picture playback delivers a seamless viewing experience.
-
Cross-platform consistency
Unified architecture delivers consistent playback across Android, iOS, and Flutter, reducing cross-platform adaptation costs.
-
Multi-scenario adaptation
-
Short video scenarios: Portrait full-screen immersive playback with vertical swipe to switch videos.
-
Mini-drama scenarios: Drawer-style episode list with tap-to-play.
-
Feeds stream scenarios: TAB page nesting with multi-directional swipe control for information flow applications.
-
Scenario Experience
Deploy the one-stop mini-drama platform to experience AUI Kits playback with your own content.
Comparison of Effects
The following video compares playback before and after AUI Kits optimization in the same environment:
-
Before optimization: Swiping between videos can cause stuttering and black screens.
-
After optimization: Smooth playback with instant full-screen display, significantly improving the visual and swiping experience.
Core Functional Modules
AUI Kits include three core modules — AUIShortVideoList, AUIShortPlaylistTheater, and AUIShortPlaylistFeeds — that share player instances and collaborate through scenario-based encapsulation.
|
Module |
Features and characteristics |
|
AUIShortVideoList (Short Video List Playback Component) |
Plays short video lists using multiple AliPlayer instances, intelligent preloading (MediaLoader), and intelligent pre-rendering. Combined with local caching for instant full-screen playback. |
|
AUlShortPlaylistTheater (Mini-Drama Theater Scenario Component) |
Provides theater details and recommendation pages with one- and two-level page nesting and shared player instances. |
|
AUlShortPlaylistFeeds (Mini-Drama Feeds Stream Scenario Component) |
TAB-paged Feeds stream architecture with multi-directional swipe playback and shared player instances for information flow apps. |
Core Capabilities
✔️ = supported, ❌ = not supported.
|
Feature |
Description |
Android |
iOS |
Flutter |
|
Local caching |
Caches video locally to improve loading speed and enable smooth playback even with unstable or no network connectivity. |
✔️ |
✔️ |
✔️ |
|
Intelligent preloading |
Loads video data in advance for smoother playback. Integrators control current video cache, preloaded video count, and cache size to balance CDN costs and user experience. |
✔️ |
✔️ |
✔️ |
|
Intelligent pre-rendering |
Reduces video playback startup delay so users see the screen faster, improving loading speed and viewing experience. |
✔️ |
✔️ |
✔️ |
|
HTTPDNS |
Replaces traditional DNS with faster, more stable resolution to reduce video loading time. |
✔️ |
✔️ |
✔️ |
|
Multi-instance player pool |
Globally shared player pool with configurable instance count. Optimizes thread management, CPU, and memory usage to balance performance and experience. |
✔️ |
✔️ |
❌ |
|
Automatic episode switching during picture-in-picture playback |
Uses independent Android floating window instances and iOS global |
✔️ |
✔️ |
❌ |
|
H.265 adaptive playback |
If H.265 stream hardware decoding fails and an H.264 fallback stream is set, it automatically degrades to play the H.264 fallback stream. If no H.264 fallback stream is set, it automatically degrades to H.265 software decoding. |
✔️ |
✔️ |
✔️ |
|
Adaptive ABR |
Supports multi-bitrate adaptive HLS and DASH streams. Call |
✔️ |
✔️ |
✔️ |
|
Video encryption |
Alibaba Cloud Video Encryption (private encryption) is a cloud-device integrated solution using proprietary algorithms to encrypt MP4 or HLS streams and ensure secure transmission. |
✔️ |
✔️ |
✔️ |