沉浸式短视频

您可以集成基于阿里云播放器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

Android端集成

iOS

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                          # 视频渲染与播放
架构设计

image

编译运行
  1. 接入已授权播放器的音视频终端SDK License。

    具体操作,请参见Android端接入License

  2. 将AUIVideoFunctionList模块,及其依赖的模块拷贝到您的项目工程中。

    工程地址:AUIVideoList

  3. 修改您项目工程的引入方式。

    请根据您自身业务需求进行集成AUIVideoFunctionList等模块。

接口调用说明

  1. 在播放界面布局的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>
  2. 在跳转播放View页面之前,调用如下示例代码添加数据源。

    AUIVideoFunctionListView mVideoFunctionListView = findViewById(R.id.aui_video_list_view);
    //清理并重新加载数据
    mVideoFunctionListView.loadSources(List<VideoInfo> list);
    //追加数据源
    mVideoFunctionListView.addSources(List<VideoInfo> list);
  3. (可选)在跳转播放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格式视频,需满足以下条件,才可正常播放:

  1. 经私有加密的MP4视频传给播放器播放时,业务侧(App侧)需要为视频URL追加etavirp_nuyila=1,例如:原视频URL为https://example.aliyundoc.com/test.mp4,则需要传给播放器播放的视频URL为https://example.aliyundoc.com/test.mp4?etavirp_nuyila=1

  2. App的License对应的uid与产生私有加密MP4的uid是一致的。

如何校验私有加密视频是否正确,以私有加密的视频URL为例说明如下:

  1. meta信息里面应带有AliyunPrivateKeyUri的tag。

  2. ffplay不能直接播放。

防录屏

防录屏通过监听录屏和截屏行为及时阻断播放进程,有效保护视频内容的版权,防止未经授权的盗录和传播。

// Android特有功能,禁止App录屏和截屏
getWindow().setFlags(WindowManager.LayoutParams.FLAG_SECURE, WindowManager.LayoutParams.FLAG_SECURE);

iOS端

源码说明

源码下载

下载地址请参见GitHub开源项目:沉浸式短视频性能模式(iOS端)

接口调用说明

  1. 引入播放View控件。

    #pragma mark -- AUIVideoFunctionListView.h
    
    AUIVideoFunctionListView *mVideoFunctionListView = [[AUIVideoFunctionListView alloc] init];
    [self.navigationController pushViewController:mVideoFunctionListView animated:YES];
  2. 在跳转播放View页面之前,调用如下示例代码添加数据源方法。

    #pragma mark -- AUIVideoFunctionListView.h
    
    // 添加数据源
    // sources是数组,装载AUIVideoInfo类型的数据,具体类型可参考AUIVideoListCommon/Models/AUIVideoInfo.h文件
    NSArray<AUIVideoInfo *> *sources = xxxx;
    [mVideoFunctionListView loadSources:sources];
  3. (可选)在跳转播放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格式视频,需满足以下条件,才可正常播放:

  1. 经私有加密的MP4视频传给播放器播放时,业务侧(App侧)需要为视频URL追加etavirp_nuyila=1,例如:原视频URL为https://example.aliyundoc.com/test.mp4,则需要传给播放器播放的视频URL为https://example.aliyundoc.com/test.mp4?etavirp_nuyila=1。

  2. App的License对应的uid与产生私有加密MP4的uid是一致的。

如何校验私有加密视频是否正确,以私有加密的视频URL为例说明如下:

  1. meta信息里面应带有AliyunPrivateKeyUri的tag。

  2. ffplay不能直接播放。

标准模式(不推荐)

标准模式使用AliListPlayer的方式实现短视频列表播放,结合内置预加载和本地缓存机制可以达到更好的体验。

特点与适用场景

适用于多个点播短视频源连续切换,并且同一时刻只有一个视频播放的场景。标准模式主要特点如下:

  • 适用于简单的业务封装,可以满足大部分的列表播放场景。

  • 内置预加载机制(预加载时长固定为1秒),控制预加载个数(最多5个)。

  • 内部只有一个播放器实例。

说明

标准模式使用限制如下:

  • AliListPlayer全局唯一,不支持创建多个。

  • 不支持长视频源、直播场景。

  • 如果需要播放HLS格式的视频,需要开启本地缓存。

  • 支持STS和URL方式播放,不支持Auth方式播放。

Android接口调用说明

  1. 在播放页面布局的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>
  2. 跳转播放View页面之前,调用如下示例代码添加数据源。

    AUIVideoStandardListView mVideoStandardListView = findViewById(R.id.aui_video_list_view);
    //清理并重新加载数据
    mVideoStandardListView.loadSources(List<VideoInfo> list);
    //追加数据源
    mVideoStandardListView.addSources(List<VideoInfo> list);
  3. (可选)在跳转播放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接口调用说明

  1. 引入播放View控件。

    #pragma mark -- AUIVideoStandradListView.h
    
    AUIVideoStandradListView *mVideoStandardListView = [[AUIVideoStandradListView alloc] init];
    [self.navigationController pushViewController:mVideoStandardListView animated:YES];
  2. 在跳转播放View页面之前,调用如下示例代码添加数据源方法。

    #pragma mark -- AUIVideoStandradListView.h
    
    // 添加数据源
    // sources是数组,装载AUIVideoInfo类型的数据,具体类型可参考AUIVideoListCommon/Models/AUIVideoInfo.h文件
    NSArray<AUIVideoInfo *> *sources = xxxx;
    [mVideoStandardListView loadSources:sources];
  3. (可选)在跳转播放View页面之前,调用如下示例代码进行播放相关配置。

    #pragma mark -- AUIVideoStandradListView.h
    
    // 是否开启页面上的播放进度条,默认开启
    [mVideoStandardListView showPlayProgressBar:YES];
    // 是否开启页面上的播放标题展示文案,默认开启
    [mVideoStandardListView showPlayTitleContent:YES];
    // 是否开启屏幕上点击切换播放状态暂停/继续,默认开启
    [mVideoStandardListView showPlayStatusTapChange:YES];
    // 是否开启自动单个视频循环播放, 默认开启。需要在开启画面前调用。
    [mVideoStandardListView openLoopPlay:YES];
    // 是否开启自动切换到下一个播放。需要在openLoopPlay:关闭的基础上开启或关闭。默认关闭。需要在开启画面前调用。
    [mVideoStandardListView autoPlayNext:YES];
  4. (可选)在跳转播放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];