AUI Kits for mini-drama scenarios are a solution based on the MediaBox audio and video SDK. They encapsulate business logic for mini-drama scenarios and incorporate best practices such as local caching, intelligent preloading, intelligent pre-rendering, and automatic episode switching during picture-in-picture playback. You can integrate and use these kits as needed.
Download the Demo
Platform | Demo |
Android/iOS |
|
Flutter |
|
Open the application and choose VOD Scenarios > Short Dramas.
Prerequisites
Before you read this topic, understand the following concepts:
What is a Low-Code Suite?
A low-code integration suite is a collection of pre-packaged tools that developers can use to quickly build applications. It includes various functional modules, such as players, lists, and Feeds streams. Developers can select and configure the required modules without having to develop them from scratch.
Scenario Overview
AUI Kits are a low-code integration suite from Alibaba Cloud based on the MediaBox audio and video SDK. They encapsulate business logic for audio and video scenarios, such as mini-dramas, and integrate best practices such as local caching, intelligent preloading, intelligent pre-rendering, and automatic episode switching during picture-in-picture playback. This suite helps developers quickly build mini-drama applications and deliver a superior audio-visual experience. AUI Kits also offer the following features:
Low-code integration
AUI Kits use a modular architecture that allows developers to flexibly select and customize functional modules, such as list playback, episode lists, and Feeds streams. This low-code integration significantly shortens development cycles, reduces development costs, and helps developers quickly implement complex features.
Optimal playback experience
Using local caching, intelligent preloading, and intelligent pre-rendering technologies, AUI Kits achieve instant full-screen playback while reducing stuttering and black screens. Multiple player instances (AliPlayer) ensure smooth video switching and efficient resource utilization. AUI Kits also support automatic episode switching during picture-in-picture playback to provide a seamless, uninterrupted, and exceptionally smooth playback experience.
Cross-platform consistency
Based on a unified architecture and design specifications, AUI Kits provide a consistent playback experience across platforms, including Android, iOS, and Flutter. This reduces cross-platform adaptation costs and improves development efficiency.
Multi-scenario adaptation
Short video scenarios: AUI Kits use a portrait style for full-screen immersive playback. You can swipe up or down to switch videos.
Mini-drama scenarios: AUI Kits provide a drawer-style episode list. You can tap an episode to play it.
Feeds stream scenarios: AUI Kits support TAB page nesting and playback control by swiping up, down, left, or right. This is suitable for information flow applications.
Scenario Experience
You can deploy the one-stop mini-drama platform online to experience the playback effects of your own mini-dramas in AUI Kits scenarios.
Comparison of Effects
The following video compares the playback and swiping experience before and after optimization using AUI Kits for mini-dramas in the same environment:
Before optimization: Swiping between videos can cause stuttering and black screens.
After optimization: Playback is smooth and provides users with an instant full-screen experience, which significantly improves the visual and swiping experience.
Core Functional Modules
AUI Kits include the following core functional modules: AUIShortVideoList, AUIShortPlaylistTheater, and AUIShortPlaylistFeeds. These modules achieve efficient cross-module collaboration through scenario-based encapsulation and shared technical capabilities, such as player instances. The following section describes each module and its relationship to the others.
Module | Features and characteristics |
AUIShortVideoList (Short Video List Playback Component) | It enables short video list playback using multiple player instances (AliPlayer), intelligent preloading (MediaLoader), and intelligent pre-rendering. Combined with local caching technology, it achieves an optimal instant full-screen playback experience. |
AUlShortPlaylistTheater (Mini-Drama Theater Scenario Component) | It provides theater details and recommendation pages. It supports one- and two-level page nesting architecture and player instance sharing, suitable for mini-drama theater scenarios. |
AUlShortPlaylistFeeds (Mini-Drama Feeds Stream Scenario Component) | It provides a Feeds stream TAB paging architecture. It supports TAB page nesting and swiping up, down, left, or right for playback, and implements player instance sharing, suitable for information flow applications. |
Core Capabilities
In the following table, ✔️ indicates that the feature is supported, and ❌ indicates that the feature is not supported.
Feature | Description | Android | iOS | Flutter |
Local caching | Local caching improves the loading speed and stability of mini-drama video playback. This lets users smoothly watch videos even with unstable or no network connection, enhancing their viewing experience. | ✔️ | ✔️ | ✔️ |
Intelligent preloading | Intelligent preloading loads video data in advance, making video playback smoother, reducing loading wait times, and enhancing the user experience. A single preloading policy can waste CDN traffic resources. Intelligent preloading lets integrators control the cache of the currently playing video, the number of preloaded videos, and the cache size. This effectively reduces business costs while ensuring a good user viewing experience. | ✔️ | ✔️ | ✔️ |
Intelligent pre-rendering | Intelligent pre-rendering reduces video playback startup delays, letting users see the screen faster. This improves video loading speed and viewing experience. | ✔️ | ✔️ | ✔️ |
HTTPDNS | HTTPDNS provides faster and more stable DNS resolution services. By replacing traditional DNS resolution, it reduces DNS resolution time, improves video playback loading speed and stability, and enhances the user experience. | ✔️ | ✔️ | ✔️ |
Multi-instance player pool | It implements a globally shared player instance pool. Configure the number of instances flexibly. By optimizing API calls and thread resource management, it achieves optimal performance and resource efficiency in thread management, CPU utilization, and memory usage, balancing performance and experience. | ✔️ | ✔️ | ❌ |
Automatic episode switching during picture-in-picture playback | Using 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 | The player SDK supports multi-bitrate adaptive HLS and DASH video streams. Call the player's | ✔️ | ✔️ | ✔️ |
Video encryption | Alibaba Cloud Video Encryption (private encryption) is a cloud-device integrated video encryption solution. It uses proprietary encryption algorithms to encrypt MP4 or HLS video streams and ensures secure transmission over links. | ✔️ | ✔️ | ✔️ |