微短剧方案Flutter端是基于Flutter含UI集成方案AliPlayerWidget实现的。
概述
AliPlayerWidget 是一款专为 Flutter 应用程序设计的高性能视频播放组件,基于阿里云播放器 SDK(flutter_aliplayer
)构建。它支持多种播放场景,包括视频点播(VOD)、直播、列表播放和短剧场景等。该组件提供了丰富的功能集,并具有高度灵活的 UI 定制能力,能够满足各类应用的需求,如教育、娱乐、电商和短剧等。有关更多信息,请参阅Flutter播放器含UI集成方案。
aliplayer_widget_example
是基于 aliplayer_widget
Flutter 库搭建的示例工程,旨在帮助开发者快速上手并深入理解如何在实际项目中集成和使用 AliPlayerWidget
;通过此工程,您可以学习如何搭建并使用短视频列表播放。
环境要求
类别 | 说明 |
类别 | 说明 |
Flutter 版本 | 不低于2.10.0,推荐使用3.22.2。 |
JDK 版本 | 推荐使用JDK 11。 JDK 11设置方法:Preferences -> Build, Execution, Deployment -> Build Tools -> Gradle -> Gradle JDK -> 选择 11(如果没有11,请升级你的Android Studio版本) |
Android 版本 | 支持Android 6.0以上版本,Gradle 版本不低于 7.0。 |
iOS 版本 | 支持iOS 10.0及以上版本。 |
手机芯片 | 架构要求:armeabi-v7a、arm64-v8a。 |
开发工具 |
前提条件
您已经获取播放器SDK License专业版的授权及License Key,应用的绑定步骤请参见绑定License。
Demo体验
下载Demo
aliplayer_widget 已经开源并提供多种下载方式。如果您需要对组件进行自定义修改,您可以使用源码依赖的方式,直接获取并修改源码。完整源码可通过以下方式获取:
下载说明 | 下载地址 |
下载说明 | 下载地址 |
Pub 源 |
aliplayer_widget 推荐开发者通过包管理工具集成 |
GitHub | |
源码包 |
下载包的内容包括:
核心组件:
AliPlayerWidget
和AliPlayerWidgetController
的完整实现。示例工程:
aliplayer_widget_example
提供点播、直播、列表播放等场景的代码示例,帮助开发者快速集成和使用。文档与注释:源码包含详细注释和开发指南,便于二次开发与定制。
集成方式
手动添加依赖
在您的 pubspec.yaml
文件中添加以下依赖:
dependencies:
aliplayer_widget: ^x.y.z
注意:x.y.z
表示 aliplayer_widget
的版本号。您可以在 Pub.dev 官方页面中查看最新稳定版本号,并将其替换为实际值(例如 ^7.0.0
)。
使用命令行工具
如果您更倾向于使用命令行,可以直接运行以下命令来添加依赖:
flutter pub add aliplayer_widget
该命令会自动更新您的 pubspec.yaml
文件。
无论您选择哪种方式,完成依赖添加后,请在终端中运行以下命令以安装依赖:
flutter pub get
通过上述步骤,AliPlayerWidget
就已成功集成到您的项目中,您可以开始使用它了!
编译与运行
克隆仓库
首先,克隆
aliplayer_widget_example
仓库到本地:cd aliplayer_widget_example
安装依赖
执行以下命令以安装项目所需的依赖:
flutter pub get
编译工程
编译Android工程编译iOS工程如果您需要编译 Android 工程,请按照以下步骤操作:
确保已安装 Android SDK 和 Gradle。
执行以下命令生成 APK 文件:
flutter build apk
编译完成后,APK 文件将位于
build/app/outputs/flutter-apk/app-release.apk
。
如果您需要编译 iOS 工程,请按照以下步骤操作:
确保已安装 Xcode 和 CocoaPods。
初始化 CocoaPods 依赖:
cd ios && pod install && cd ..
执行以下命令生成 iOS 应用包(IPA 文件):
flutter build ipa
编译完成后,IPA 文件将位于
build/ios/ipa/Runner.ipa
。
运行示例
运行Android示例
flutter run lib/main.dart
运行iOS示例
cd ios && pod install && cd ..//运行前先pod install flutter run lib/main.dart
使用Android Studio
打开项目:
启动Android Studio。选择
Open an Existing Project
,然后导航到克隆的aliplayer_widget_example
目录并打开。安装依赖:
在 Android Studio 中,点击
pubspec.yaml
文件,然后点击右上角的Pub Get
按钮以安装依赖。配置设备:
确保已连接 Android 真机设备。
运行应用:
点击工具栏中的绿色运行按钮(
Run
),选择目标设备后即可启动应用。
使用 VS Code
打开项目:
启动 VS Code。选择
File -> Open Folder
,然后导航到克隆的aliplayer_widget_example
目录并打开。安装依赖:
打开终端(
Ctrl + ~
),运行以下命令以安装依赖:flutter pub get
配置设备:
确保已连接 Android 或 iOS 真机设备。使用 VS Code 的设备选择器(左下角)选择目标设备。
运行应用:
按下
F5
或点击左侧活动栏中的Run and Debug
图标,选择Flutter
配置并启动调试会话。
使用 Xcode(仅限 iOS)
打开项目:
导航到
ios
目录,双击Runner.xcworkspace
文件以在 Xcode 中打开项目。安装 CocoaPods 依赖:
如果尚未安装 CocoaPods 依赖,请在终端中运行以下命令:
cd ios && pod install && cd ..
配置签名:
在 Xcode 中,选择
Runner
项目,进入Signing & Capabilities
标签页,配置有效的开发者账号和签名证书。运行应用:
点击 Xcode 工具栏中的运行按钮(
▶️
),选择目标设备后即可启动应用。
使用方法
短视频列表播放页面(ShortVideoPage)
短视频播放的核心在于展示如何在列表中嵌入多个 AliPlayerWidget
实例,以实现多个视频的列表播放功能。示例如下:
@override
void initState() {
super.initState();
_pageController = PageController();
_loadVideoInfoList();
_pageController.addListener(_onPageChanged);
}
Widget build(BuildContext context) {
return Scaffold(
body: PageView.builder(
controller: _pageController,
itemCount: videoInfoList.length,
itemBuilder: (context, index) {
final videoInfo = videoInfoList[index];
return ShortVideoItem(videoInfo: videoInfo);
},
),
);
}
运行效果: 当前页面展示了一个视频列表,每个列表项包含一个独立的播放器实例。用户可以通过滑动操作切换视频,同时支持手势滑动进行视频切换。
更多针对微短剧场景的优化方案,请参考aliplayer_widget_example
示例工程中的具体实现。
核心功能介绍
本组件功能使用阿里云播放器SDK,通过多个播放器实例(AliPlayer)+ 预加载(MediaLoader)+ 预渲染的方式进行实现,使用了预加载、预渲染、HTTPDNS、加密播放等核心能力,在播放延迟、播放稳定性及安全性方面大幅提升观看体验。
预加载
通过滑动窗口策略,动态启停视频的预加载任务。SDK底层基于网络状态智能调节任务优先级,以确保正播放视频和即将播放视频可以获得更多的网络资源,显著提升视频秒开率,减少播放卡顿。即使在快速滑动视频时,仍然可以获得流畅的播放体验。更多信息,请参见预加载。
预渲染
使用预渲染的方式,在后台提前渲染后续视频的首帧,减少黑屏的出现,让播放更加丝滑。音视频终端 SDK和播放器SDK从6.16.0版本开始增添了对强制预渲染功能的支持。更多信息,请参见预渲染。
HTTPDNS
HTTPDNS可以提供更快速和稳定的DNS解析服务,通过替换传统DNS解析,可以减少DNS解析时间,提高视频播放的加载速度和稳定性,从而提升用户的观看体验。音视频终端SDK和播放器SDK从6.12.0版本开始无需手动开启HTTPDNS。更多信息,请参见HTTPDNS。
视频加密
微短剧场景的视频通常为1~3分钟的MP4格式视频,音视频终端SDK和播放器SDK从6.8.0版本开始支持MP4私有加密播放能力,为微短剧场景的视频提供安全保障支撑。更多信息,请参见阿里云视频加密(私有加密)。
经私有加密的MP4格式视频,需满足以下条件,才可正常播放:
经私有加密的MP4视频传给播放器播放时,业务侧(App侧)需要为视频URL追加
etavirp_nuyila=1
,例如:原视频URL为https://example.aliyundoc.com/test.mp4
,则需要传给播放器播放的视频URL为https://example.aliyundoc.com/test.mp4?etavirp_nuyila=1
。App的License对应的uid与产生私有加密MP4的uid是一致的。
如何校验私有加密视频是否正确,以私有加密的视频URL为例说明如下:
meta信息里面应带有
AliyunPrivateKeyUri
的tag。ffplay不能直接播放。
H265自适应播放
当播放H265流硬解失败且已设置H264备流时,实现自动降级播放H264备流;若未设置H264备流,则自动降级为H265软解播放。更多信息,请参见H265自适应播放。
自适应ABR
播放器SDK支持多码率自适应HLS、DASH视频流,通过调用播放器的selectTrack
方法切换播放的码流,可以实现网络自适应切换视频清晰度的功能。更多信息,详情请参见网络自适应切换。
常见问题
更多关于使用阿里云播放器 SDK 的常见问题及修复建议,请参见播放器常见问题。
- 本页导读 (1)
- 概述
- 环境要求
- 前提条件
- Demo体验
- 下载Demo
- 集成方式
- 编译与运行
- 使用方法
- 短视频列表播放页面(ShortVideoPage)
- 核心功能介绍
- 预加载
- 预渲染
- HTTPDNS
- 视频加密
- H265自适应播放
- 自适应ABR
- 常见问题