本文提供视频点播 Android 端集成短剧场景的方案概览，并为您详细介绍如何快速集成短剧 Demo。

火山引擎视频点播针对短剧场景提供四种客户端集成方案。下表列出这四种解决方案的详细区别。

在集成短剧 Demo 前，建议您先参考文档跑通 Demo，体验短剧场景的功能。

短剧 Demo 源码位于在 VEVodDemo-Android 仓库 vod-demo 文件夹内，其目录结构说明如下：

|--VEVodDemo-android
|--|--app               // 主 app （壳工程）
|--|--vod-demo-api      // vod-demo 模块与壳工程交互接口（组件化）
|--|--vod-demo          // 业务 demo 层
|--|--vod-scenekit      // 场景控件层
|--|--vod-playerkit     // 播放控件层
|--|--vod-settingskit   // 播放设置模块

步骤 1：下载源码

运行以下命令将源码下载至本地：

git clone https://github.com/volcengine/VEVodDemo-android
cd VEVodDemo-android

步骤 2：拷贝代码

将以下文件夹拷贝至您的项目根目录下，层级结构与 VEVodDemo-Android 中保持一致：

gradle-config
vod-demo
vod-demo-api
vod-playerkit
vod-scenekit
vod-settingskit

步骤 3：配置 Maven 仓库

在项目根目录下的 build.gradle 文件中的 repositories 部分配置 google、mavenCentral() 和火山引擎 maven 服务。

allprojects {
    repositories {
        google()
        mavenCentral()
        maven {
            url "https://artifact.bytedance.com/repository/Volcengine/" // 火山引擎 maven 服务
        }
    }
}

步骤 4：引入短剧模块

1. 在 settings.gradle 文件中引入 Demo 模块：

   include ':app'
   include ':vod-demo'
   include ':vod-demo-api'
   
   apply from: file("gradle-config/vod_playerkit_library_settings.gradle")
   apply from: file("gradle-config/vod_scenekit_library_settings.gradle")
   

2. 在 App module 的 build.gradle 文件中添加对 Demo 模块的依赖：

   // 在 app 的 build.gradle 文件添加 Java 8 支持
   android {
       // ...
       compileOptions {
           sourceCompatibility JavaVersion.VERSION_1_8
           targetCompatibility JavaVersion.VERSION_1_8
       }
   }
    
   dependencies {
       api project(":vod-demo")
   }
   

3. 同步 gradle。如果 Android Studio 中没有报错，则表示成功引入了 Demo 相关模块。

步骤 5：配置权限及混淆规则

在项目中添加点播 SDK 所需的权限和混淆规则，具体请见集成 SDK。短剧 Demo 无新增权限，混淆规则已在 consumer-rules.pro 中配置，您无需额外工作。

步骤 6：初始化短剧 Demo

调用 VodSDK 的 init 方法进行初始化。你可以修改 init 方法中的 L.ENABLE_LOG 来开启或关闭日志。

public class App extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        VodSDK.init(this,
                "your app id",
                "your app name",
                "your app channel",
                "your app version",
                "assets:///your_license_name.lic",
        );
    }
}

步骤 7：集成短剧页面

vod-demo 模块的 Manifest 中已配置了 DramaMainActivity，您可参考以下代码直接使用：

DramaMainActivity.intentInto(activity);

您可参考以下步骤快速将短剧 Demo 与您的业务逻辑进行适配：

1. 数据层适配，以快速接入短剧场景的核心功能。您需要：
   1. 替换业务接口：您的业务逻辑中需要实现 minidrama/data/remote/api 包中定义的 API。
   2. 转换数据结构：将业务 AppServer 返回的数据结构转换成短剧 Demo 中定义的数据结构，以便快速复用 Demo 中的现有业务逻辑。
2. 适配付费内容解锁播放等短剧场景特色功能。

短剧 Demo 源码结构说明

├ VodSDK.java                                              // Demo 层播放器 SDK 初始化类
├ data
│   └ remote
│       ├ api
│       │   └ DramaApi.java                                // 短剧 HTTP API 接口类
│       └ model
│           └ drama
│               ├ DramaInfo.java                           // 短剧信息
│               ├ EpisodeInfo.java                         // 单集信息
│               ├ EpisodePayInfo.java                      // 单集付费信息
│               └ EpisodeVideo.java                        // 单集视频
└ ui
    └ minidrama
        ├ data
        │   └ remote
        │       └ api
        │           ├ GetDramaDetailApi.java               // 获取短剧详情流 API
        │           ├ GetDramasApi.java                    // 获取短剧封面流 API
        │           ├ GetEpisodeRecommendApi.java          // 获取短剧推荐流 API
        │           └ GetEpisodesApi.java                  // 指定 ID 获取付费后短剧视频 API
        └ scene
            ├ detail
            │   ├ DramaDetailVideoActivity.java            // 短剧详情页壳 Activity
            │   ├ DramaDetailVideoFragment.java            // 短剧详情页 Fragment
            │   ├ DramaEpisodePayDialogFragment.java       // 短剧付费弹窗
            │   └ DramaEpisodeSelectDialogFragment.java    // 短剧选集弹窗
            ├ main
            │   └ DramaMainActivity.java                   // 短剧首页
            ├ recommend
            │   └ DramaRecommendVideoFragment.java         // 短剧推荐页
            ├ theater
            │   └ DramaTheaterFragment.java                // 短剧剧场页
            └ widgets
                ├ DramaVideoViewFactory.java               // 短剧 VideoView 工厂
                ├ bottom
                │   ├ EpisodeSelectorViewHolder.java       // 短剧选集控件
                │   └ SpeedIndicatorViewHolder.java        // 短剧倍速控件
                └ layer
                    ├ DramaBottomProgressBarLayer.java      // 短剧进度条浮层
                    ├ DramaGestureLayer.java                // 短剧手势浮层
                    ├ DramaTimeProgressDialogLayer.java     // 短剧进度展示浮层
                    └ DramaVideoLayer.java                  // 短剧视频浮层

数据层适配

替换业务接口

1. 推荐页接口适配：参考以下示例代码在推荐页中调用获取短剧推荐流接口。

   说明

   也可参考 GetEpisodeRecommend.java 中的实现。

   public class DramaRecommendVideoFragment extends BaseFragment {
       private GetEpisodeRecommendApi mRemoteApi;
       
       @Override
       public void onCreate(@Nullable Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           // mRemoteApi = new GetEpisodeRecommend();
           mRemoteApi = new AppGetEpisodeRecommendApi();
       }
   }
   
   // 可参考 GetEpisodeRecommend.java 中的实现。
   public class AppGetEpisodeRecommendApi implements GetEpisodeRecommendApi {
       
       @Override
       public void getRecommendEpisodeVideoItems(int pageIndex, int pageSize, RemoteApi.Callback<List<EpisodeVideo>> callback) {
       }
       
       @Override
       public void cancel() {
       }
   }
   

2. 详情页接口适配：参考以下示例代码在详情页中调用获取短剧详情流接口。

   说明

   也可参考 GetDramaDetail.java 中的实现。

   public class DramaDetailVideoFragment extends BaseFragment {
       private GetDramaDetailApi mRemoteApi;
   
       @Override
       public void onCreate(@Nullable Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           
           // mRemoteApi = new MockGetDramaDetail();
           mRemoteApi = new AppGetDramaDetail();
       }
   }
   
   
   public class AppGetDramaDetailApi implements GetDramaDetailApi {
       
       @Override
       public void getDramaDetail(int startIndex, int pageSize, String dramaId, Integer orderType, RemoteApi.Callback<List<EpisodeVideo>> callback) {
       }
       
       @Override
       public void cancel() {
       }
   }
   

3. 剧场页接口适配：参考以下示例代码在剧场页中调用获取短剧列表接口。

   说明

   也可参考 GetDramas.java 中的实现。

   public class DramaTheaterFragment extends BaseFragment {
       private GetDramasApi mRemoteApi;
       
       @Override
       public void onCreate(@Nullable Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           // mRemoteApi = new GetDramas();
           mRemoteApi = new AppGetDramasApi();
       }
   }
   
   public class AppGetDramasApi implements GetDramasApi {
       
       @Override
       public void getDramas(int pageIndex, int pageSize, RemoteApi.Callback<List<DramaInfo>> callback) {
       }
       
       @Override
       public void cancel() {
       }
   }
   

转换数据结构

为构建短剧业务逻辑，短剧 Demo 层定义了 DramaInfo（短剧信息）、EpisodeVideo（单集视频）、EpisodeInfo（单集信息）、EpisodePayInfo（单集付费解锁信息）等数据结构。您需要将你自己的应用服务端返回的数据结构转换为上述数据结构。数据结构具体说明如下表所示。

短剧 Demo 中使用了短视频场景控件，而 VideoItem 是该控件的数据结构。因此在短剧 Demo 中需要通过以下示例代码将 EpisodeVideo 转换为 VideoItem 才能与短视频场景控件配合使用。

// 将 episodeVideo 转为 videoItem
VideoItem videoItem = EpisodeVideo.toVideoItem(episodeVideo);

基于短视频场景控件构建的组件，都只能获取到 VideoItem，无法感知 EpisodeVideo。因此如果您需要基于短视频场景控件构建短剧业务，需要提供通过 VideoItem 获取 EpisodeVideo 的能力。获取到 EpisodeVideo 后，您就获得了短剧相关信息，继而可以编写短剧相关的业务逻辑。

// 从 videoItem 中获取对应的 episodeVideo
EpisodeVideo episodeVideo = EpisodeVideo.get(videoItem);

适配短剧场景特色功能

防录屏

可参考以下示例代码在 Activity 的 onCreate 方法中调用系统 API 开启防录屏功能。短剧 Demo 的 DramaMainActivity、DramaDetailVideoActivity 中已默认开启防录屏。

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_SECURE, WindowManager.LayoutParams.FLAG_SECURE);
}

付费内容解锁播放

短剧 Demo 中付费内容解锁播放的流程具体如下图所示。

短剧 Demo 未接入第三方支付 SDK。目前使用 mock 的方式串通了流程。您可参考以下步骤替换为真实链路：

1. 接入第三方支付 SDK，替换 pay 方法中的 mock 支付逻辑。
2. 实现 GetEpisodesApi 接口，替换 onCreate 中实例化的 MockGetEpisodes 逻辑。

示例代码如下：

public class DramaEpisodePayDialogFragment extends BaseDialogFragment {

    private GetEpisodesApi mGetEpisodeApi;
    
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // ...
        // TODO replace mock code
        mGetEpisodeApi = new MockGetEpisodes();
    }
    
    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        view.findViewById(R.id.pay).setOnClickListener(v -> pay());
    }
    
    private void pay() {
        // TODO replace mock code
        MockThirdPartPayService.requestPay(mEpisode, () -> {
            if (getActivity() == null) return;
            // mock 第三方支付返回成功
            fetchUnlockedEpisode(mEpisode);
        });
    }
}