沉浸式短视频
您可以集成基于阿里云播放器SDK封装的UI组件,快速开发出顺滑的短视频体验业务场景。本文为您介绍如何实现短视频良好的播放体验方法。
应用场景
短剧
适用于微短剧场景的最佳实践,具有集成简单、良好播放体验等特点,助力开发者快速搭建微短剧业务。推荐开发者参考微短剧模式快速实现。
短视频
类似《淘宝视频》的UGC/PGC内容的播放场景,全屏展示竖版短视频,上下滑动切换视频内容。推荐开发者参考性能模式实现。
体验Demo
平台 | 获取Demo | 效果展示 |
Android | ||
iOS |
源码结构
平台 | 模块名称 | 模块说明 | |||||
Android | AUIVideoList/AUIVideoListCommon | 沉浸式播放公共模块 | |||||
AUIVideoList/AUIVideoStandradList | 沉浸式播放(标准)功能封装模块 | ||||||
AUIVideoList/AUIVideoFunctionList | 沉浸式播放(性能)功能封装模块 | ||||||
AUIVideoList/AUIVideoEpisode | 沉浸式播放(短剧)功能封装模块 | ||||||
iOS | AUIVideoListCommon/AUIVideoListCommon | 公共组件代码 | |||||
AUIVideoListCommon/AUIVideoFunctionList | 沉浸式短视频性能组件代码 | ||||||
AUIVideoListCommon/AUIVideoStandradList | 沉浸式短视频标准组件代码 | ||||||
AUIVideoListCommon/AUIShortEpisode | 短剧组件代码 |
微短剧模式
基于阿里云在微短剧场景的实践经验,AUI Kits针对微短剧场景进行业务封装,沉淀了音视频终端SDK的本地缓存、智能预加载等最佳实践,提供低代码集成套件,帮助集成方快速搭建微短剧App并获得更好的视听体验。
平台 | 集成文档 | ||||||
Android | |||||||
iOS | |||||||
快应用 |
性能模式
性能模式使用多个播放器实例(AliPlayer)+ 预加载(MediaLoader)+ 预渲染的方式实现短视频列表播放,结合本地缓存可以达到更好体验。相比标准模式,性能模式支持播放器所有功能,更为灵活,功能更为强大。
特点与适用场景
适用于多个点播、直播视频源连续切换,并且同一时刻只有一个或多个视频播放的场景,以及点播+直播连续切换的场景。性能模式的主要特点如下:
支持多个AliPlayer实例,弱网播放切换时更加顺滑。
不限制播放方式和格式。
支持预加载自定义策略,支持预渲染。
完整的实现逻辑及代码请参见Demo,下文仅对关键节点作出说明详解。
Android端
源码说明
源码下载
下载地址请参见GitHub开源项目:沉浸式短视频性能模式(Android端)
源码结构
.
└── videoefunctionlist # 根目录
├── AUIFunctionListPlayerActivity.java # 多实例页面
├── AUIVideoFunctionListController.java # 多实例页面控制器
├── AUIVideoFunctionListView.java # 视频列表视图
├── adapter
│ ├── AUIVideoFunctionListAdapter.java # 多实例面板适配器
│ └── AUIVideoFunctionListLayoutManager.java # 布局管理器
└── player
├── AliPlayerPool.java # 播放器池
├── AliPlayerPreload.java # 预加载
└── AliyunRenderView.java # 视频渲染与播放
架构设计
编译运行
接入已授权播放器的音视频终端SDK License。
具体操作,请参见Android端接入License。
将AUIVideoFunctionList模块,及其依赖的模块拷贝到您的项目工程中。
工程地址:AUIVideoList
修改您项目工程的引入方式。
请根据您自身业务需求进行集成AUIVideoFunctionList等模块。
接口调用说明
在播放界面布局的xml文件中引入沉浸式播放的View控件。
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <com.alivc.player.videolist.auivideofunctionlist.AUIVideoFunctionListView android:id="@+id/aui_video_list_view" android:layout_width="match_parent" android:layout_height="match_parent" /> </FrameLayout>
在跳转播放View页面之前,调用如下示例代码添加数据源。
AUIVideoFunctionListView mVideoFunctionListView = findViewById(R.id.aui_video_list_view); //清理并重新加载数据 mVideoFunctionListView.loadSources(List<VideoInfo> list); //追加数据源 mVideoFunctionListView.addSources(List<VideoInfo> list);
(可选)在跳转播放View页面之后,调用如下示例代码进行播放相关配置。
//单视频循环播放 mVideoFunctionListView.openLoopPlay(boolean enable); //视频播放完成后是否自动播放下一个视频(需要关闭循环播放) mVideoFunctionListView.autoPlayNext(boolean enable); //是否显示进度条 mVideoFunctionListView.showPlayProgressBar(boolean enable); //是否显示播放标题展示文案 mVideoFunctionListView.showPlayTitleContent(boolean enable); //是否开启屏幕上点击切换播放状态暂停/继续 mVideoFunctionListView.showPlayStatusTapChange(boolean enable);
核心功能介绍
本地缓存
本地缓存可以提高短视频播放的加载速度和稳定性,使用户在网络不稳定或者断网的情况下依然能够流畅观看视频,提升用户的观看体验。更多信息,请参见本地缓存。
智能预加载
智能预加载可以提前加载视频数据,使视频播放更加流畅,减少加载等待时间,提升用户的观看体验。更多信息,请参见预加载。
智能预渲染
智能预渲染可以减少视频播放的启动延迟,让用户更快地看到画面,提升视频播放的加载速度和观看体验。更多信息,请参见预渲染。
HTTPDNS
HTTPDNS可以提供更快速和稳定的DNS解析服务,通过替换传统DNS解析,可以减少DNS解析时间,提高视频播放的加载速度和稳定性,从而提升用户的观看体验。更多信息,请参见HTTPDNS。
多实例播放器池
使用多个播放器实例,使上下滑切换更加流畅,减少加载等待时间,提升用户观看体验。
视频加密
音视频终端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不能直接播放。
防录屏
防录屏通过监听录屏和截屏行为及时阻断播放进程,有效保护视频内容的版权,防止未经授权的盗录和传播。
// Android特有功能,禁止App录屏和截屏
getWindow().setFlags(WindowManager.LayoutParams.FLAG_SECURE, WindowManager.LayoutParams.FLAG_SECURE);
iOS端
源码说明
源码下载
下载地址请参见GitHub开源项目:沉浸式短视频性能模式(iOS端)
接口调用说明
引入播放View控件。
#pragma mark -- AUIVideoFunctionListView.h AUIVideoFunctionListView *mVideoFunctionListView = [[AUIVideoFunctionListView alloc] init]; [self.navigationController pushViewController:mVideoFunctionListView animated:YES];
在跳转播放View页面之前,调用如下示例代码添加数据源方法。
#pragma mark -- AUIVideoFunctionListView.h // 添加数据源 // sources是数组,装载AUIVideoInfo类型的数据,具体类型可参考AUIVideoListCommon/Models/AUIVideoInfo.h文件 NSArray<AUIVideoInfo *> *sources = xxxx; [mVideoFunctionListView loadSources:sources];
(可选)在跳转播放View页面之前,调用如下示例代码播放相关配置。
#pragma mark -- AUIVideoFunctionListView.h // 是否开启页面上的播放进度条,默认开启 [mVideoFunctionListView showPlayProgressBar:YES]; // 是否开启页面上的播放标题展示文案,默认开启 [mVideoFunctionListView showPlayTitleContent:YES]; // 是否开启屏幕上点击切换播放状态暂停/继续,默认开启 [mVideoFunctionListView showPlayStatusTapChange:YES]; // 是否开启自动单个视频循环播放, 默认开启。需要在开启画面前调用。 [mVideoFunctionListView openLoopPlay:YES]; // 是否开启自动切换到下一个播放。需要在openLoopPlay:关闭的基础上开启或关闭。默认关闭。需要在开启画面前调用。 [mVideoFunctionListView autoPlayNext:YES];
核心功能介绍
本地缓存
本地缓存可以提高短视频播放的加载速度和稳定性,使用户在网络不稳定或者断网的情况下依然能够流畅观看视频,提升用户的观看体验。更多信息,请参见本地缓存。
智能预加载
智能预加载可以提前加载视频数据,使视频播放更加流畅,减少加载等待时间,提升用户的观看体验。更多信息,请参见预加载。
智能预渲染
智能预渲染可以减少视频播放的启动延迟,让用户更快地看到画面,提升视频播放的加载速度和观看体验。更多信息,请参见预渲染。
HTTPDNS
HTTPDNS可以提供更快速和稳定的DNS解析服务,通过替换传统DNS解析,可以减少DNS解析时间,提高视频播放的加载速度和稳定性,从而提升用户的观看体验。更多信息参见HTTPDNS。
多实例播放器池
使用多个播放器实例,使上下滑切换更加流畅,减少加载等待时间,提升用户观看体验。
视频加密
音视频终端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不能直接播放。
标准模式(不推荐)
标准模式使用AliListPlayer的方式实现短视频列表播放,结合内置预加载和本地缓存机制可以达到更好的体验。
特点与适用场景
适用于多个点播短视频源连续切换,并且同一时刻只有一个视频播放的场景。标准模式主要特点如下:
适用于简单的业务封装,可以满足大部分的列表播放场景。
内置预加载机制(预加载时长固定为1秒),控制预加载个数(最多5个)。
内部只有一个播放器实例。
标准模式使用限制如下:
AliListPlayer全局唯一,不支持创建多个。
不支持长视频源、直播场景。
如果需要播放HLS格式的视频,需要开启本地缓存。
支持STS和URL方式播放,不支持Auth方式播放。
Android接口调用说明
在播放页面布局的XML文件中引入沉浸式播放View控件。
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <com.alivc.player.videolist.auivideostandradlist.AUIVideoStandardListView android:id="@+id/aui_video_list_view" android:layout_width="match_parent" android:layout_height="match_parent" /> </FrameLayout>
跳转播放View页面之前,调用如下示例代码添加数据源。
AUIVideoStandardListView mVideoStandardListView = findViewById(R.id.aui_video_list_view); //清理并重新加载数据 mVideoStandardListView.loadSources(List<VideoInfo> list); //追加数据源 mVideoStandardListView.addSources(List<VideoInfo> list);
(可选)在跳转播放View页面之后,调用如下示例代码进行播放相关配置。
//单视频循环播放 mVideoStandardListView.openLoopPlay(boolean enable); //视频播放完成后是否自动播放下一个视频(需要关闭循环播放) mVideoStandardListView.autoPlayNext(boolean enable); //是否显示进度条 mVideoStandardListView.showPlayProgressBar(boolean enable); //是否显示播放标题展示文案 mVideoStandardListView.showPlayTitleContent(boolean enable); //是否开启屏幕上点击切换播放状态暂停/继续 mVideoStandardListView.showPlayStatusTapChange(boolean enable);
说明您也可以按需进行如下配置:
设置预加载个数。
AliListPlayer在起播前可通过设置preloadCount值(默认值是2)修改预加载个数。具体计算实际的预加载数的规则是:1 + preloadCount * 2。示例代码如下:
// 设置预加载个数。设置2时代表实际的预加载数为5条。 mVideoStandardListView.setPreloadCount(int count);
开启本地缓存。
在播放起播前可以开启本地缓存功能。示例代码如下:
/* enable -- 是否开启本地缓存 path -- 本地缓存路径 */ mVideoStandardListView.enableLocalCache(boolean enable,String path);
iOS接口调用说明
引入播放View控件。
#pragma mark -- AUIVideoStandradListView.h AUIVideoStandradListView *mVideoStandardListView = [[AUIVideoStandradListView alloc] init]; [self.navigationController pushViewController:mVideoStandardListView animated:YES];
在跳转播放View页面之前,调用如下示例代码添加数据源方法。
#pragma mark -- AUIVideoStandradListView.h // 添加数据源 // sources是数组,装载AUIVideoInfo类型的数据,具体类型可参考AUIVideoListCommon/Models/AUIVideoInfo.h文件 NSArray<AUIVideoInfo *> *sources = xxxx; [mVideoStandardListView loadSources:sources];
(可选)在跳转播放View页面之前,调用如下示例代码进行播放相关配置。
#pragma mark -- AUIVideoStandradListView.h // 是否开启页面上的播放进度条,默认开启 [mVideoStandardListView showPlayProgressBar:YES]; // 是否开启页面上的播放标题展示文案,默认开启 [mVideoStandardListView showPlayTitleContent:YES]; // 是否开启屏幕上点击切换播放状态暂停/继续,默认开启 [mVideoStandardListView showPlayStatusTapChange:YES]; // 是否开启自动单个视频循环播放, 默认开启。需要在开启画面前调用。 [mVideoStandardListView openLoopPlay:YES]; // 是否开启自动切换到下一个播放。需要在openLoopPlay:关闭的基础上开启或关闭。默认关闭。需要在开启画面前调用。 [mVideoStandardListView autoPlayNext:YES];
(可选)在跳转播放View页面之后,调用如下示例代码进行播放相关配置。
#pragma mark -- AUIVideoStandradScrollView.m // 追加数据源 // sources是数组,装载AUIVideoInfo类型的数据,具体类型可参考AUIVideoListCommon/Models/AUIVideoInfo.h文件 NSArray<AUIVideoInfo *> *sources = xxxx; [mVideoStandardListView addSources:sources];
说明您也可以按需进行如下配置:
设置预加载个数。
AliListPlayer在起播前可通过设置preloadCount值(默认值是2)修改预加载个数。具体计算实际的预加载数的规则是:1 + preloadCount * 2。示例代码如下:
// 设置预加载个数。设置2时代表实际的预加载数为5条。 self.listPlayer.preloadCount = 2;
开启本地缓存。
在播放起播前可以开启本地缓存功能。示例代码如下:
#pragma mark -- AUIVideoListCommon/Models/AUIVideoCachePreloadTool.h [AUIVideoCachePreloadTool setLocalCacheConfig]; #pragma mark -- AUIVideoStandradScrollView.m // 建议在AliListPlayer起播前配置开启单实例缓存功能,防止HLS流因不开启单实例缓存无法播放问题 AVPConfig *config = [self.listPlayer getConfig]; config.enableLocalCache = true; [self.listPlayer setConfig:config];