The AUI Kits short-form drama scenario is built on the MediaBox audio and video software development kit (SDK). It encapsulates the business logic for short-form drama scenarios and includes best practices such as local caching, intelligent preloading, intelligent pre-rendering, and automatic episode switching in picture-in-picture (PiP) mode. You can integrate these features as needed.
Download the demo
Platform | Experience the demo |
Android/iOS |
|
Flutter |
|
Open the application and select .
Key concepts
Before you read this topic, make sure you 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. You can select and configure these modules as needed, without developing them from scratch.
Scenario overview
AUI Kits is a low-code integration suite from Alibaba Cloud. It is built on the MediaBox audio and video SDK and tailored for audio and video scenarios, such as short-form dramas. It integrates best practices such as local caching, intelligent preloading, intelligent pre-rendering, and automatic episode switching in picture-in-picture (PiP) mode. These features help you quickly build short-form drama apps with a superior viewing experience. AUI Kits has the following features:
Low-code integration
AUI Kits uses a modular architecture that lets you flexibly select and customize functional modules, such as list playback, episode lists, and Feeds streams. This low-code integration shortens the development cycle, reduces costs, and helps you quickly implement complex features.
Ultimate playback experience
Technologies such as local caching, intelligent preloading, and intelligent pre-rendering enable instant full-screen playback while reducing stuttering and black screens. Multiple AliPlayer instances ensure smooth video switching and efficient resource use. The suite also supports automatic episode switching in picture-in-picture (PiP) mode for a seamless and uninterrupted experience, delivering exceptionally smooth playback.
Cross-platform consistency
A unified architecture and design specification ensures a consistent playback experience across Android, iOS, and Flutter. This reduces cross-platform adaptation costs and improves development efficiency.
Adaptation to multiple scenarios
Short video scenario: Uses a vertical screen style for immersive, full-screen playback. Swipe up or down to switch videos.
Short-form drama scenario: Provides a drawer-style episode list. Tap an episode to play it.
Feeds stream scenario: Supports nested tab pages and swiping up, down, left, or right for playback. This is suitable for content feed applications.
Try the scenario
You can deploy your service online using the one-stop solution for building a short-form drama platform to play back your own short-form dramas in the AUI Kits scenario.
Before and after comparison
The following video compares the swipe and playback experience in the same environment before and after optimization with AUI Kits:
Before optimization: Swiping between videos causes some stuttering and black screens.
After optimization: Playback is silky smooth, providing an instant full-screen experience. This significantly improves the viewing and swiping experience.
Core functional modules
The core functional modules of AUI Kits include AUIShortVideoList, AUIShortDramaList, and AUIShortDramaFeeds. These modules collaborate efficiently using scenario-based encapsulation and sharing technical capabilities, such as player instances. The following table describes each module.
Module | Features and characteristics |
AUIShortVideoList (short video list playback component) | Achieves short video list playback using multiple AliPlayer instances, intelligent preloading (MediaLoader), and intelligent pre-rendering. Combined with local caching technology, it delivers an ultimate playback experience with instant full-screen start. |
AUIShortDramaList (short-form drama theater scenario component) | Provides a theater details page and a recommendations page. It supports a nested two-level page architecture and player instance sharing, making it suitable for short-form drama theater scenarios. |
AUIShortDramaFeeds (short-form drama Feeds stream scenario component) | Provides a Feeds stream architecture with tab-based paging. It supports nested tab pages and playback by swiping up, down, left, or right. It also shares player instances, making it suitable for information stream 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 video playback for short-form dramas. Users can watch videos smoothly even with an unstable or disconnected network, which enhances the viewing experience. | ✔️ | ✔️ | ✔️ |
Intelligent preloading | Intelligent preloading loads video data in advance, making playback smoother, reducing loading times, and improving the user experience. However, a single preloading strategy can waste CDN traffic. With intelligent preloading, you can control not only the cache of the currently playing video but also the number of preloaded videos and the cache size. This effectively reduces business costs while ensuring a good user experience. | ✔️ | ✔️ | ✔️ |
Intelligent pre-rendering | Intelligent pre-rendering reduces video playback startup latency. Users see the video faster, which improves loading speed and the viewing experience. | ✔️ | ✔️ | ✔️ |
HTTPDNS | HTTPDNS provides faster and more stable DNS parsing. It replaces traditional DNS parsing to reduce resolution time, which improves video loading speed and stability for a better user experience. | ✔️ | ✔️ | ✔️ |
Multi-instance player pool | Implements a globally shared player instance pool with a configurable number of instances. By optimizing API calls and thread resource management, it ensures optimal performance and minimal resource consumption in terms of thread management, CPU utilization, and memory usage. This achieves the best balance between performance and experience. | ✔️ | ✔️ | ❌ |
Automatic episode switching in PiP mode | Uses independent instances for Android floating windows and global | ✔️ | ✔️ | ❌ |
H.265 adaptive playback | When hardware decoding of an H.265 stream fails and an H.264 fallback stream is configured, it automatically switches to playing the H.264 stream. If no H.264 fallback stream is set, it automatically falls back to software decoding for the H.265 stream. | ✔️ | ✔️ | ✔️ |
Adaptive ABR | The player SDK supports adaptive bitrate streaming for HLS and DASH video streams. You can switch the video definition based on network conditions by calling the player's | ✔️ | ✔️ | ✔️ |
Video encryption | Alibaba Cloud Video Encryption (Private Encryption) is a cloud-integrated video encryption solution. It uses a private encryption algorithm to encrypt MP4 or HLS video streams and ensures secure transmission across the entire link. | ✔️ | ✔️ | ✔️ |