抖音同款短视频最佳实践

本文介绍如何通过 Android 点播 SDK 搭建“抖音”同款短视频场景，实现“零首帧”的短视频播放效果。

背景信息

在短视频场景中，缩短视频首帧耗时和提升视频上下滑动的流畅度是提升用户观看体验的重要手段：

• 视频首帧耗时是指从用户点击开始播放按钮到视频首帧画面展现出来的时间。视频首帧耗时是视频类应用的核心指标之一，直接影响用户的观看体验。如果首帧加载需要几秒钟，用户可能会感到不耐烦，甚至选择放弃观看。短视频场景致力于实现“零首帧”，并不是真正的 0 毫秒起播，而是用户几乎感知不到有首帧耗时的存在。

• 在短视频场景中，用户通常通过上下滑动来浏览不同的视频内容。如果视频在滑动过程中出现卡顿，会阻碍用户观看。提升视频上下滑动的流畅度可以确保用户更为轻松地浏览视频和享受视频内容，提高整体观看流畅度和连贯性，从而增加人均播放量和用户停留时长。

为了帮助您快速搭建“抖音”同款短视频场景，点播 SDK 基于抖音亿级日活跃用户的真实反馈和大规模实践经验，提供两大最佳策略：预加载策略和预渲染策略。此外，您还可参考开源示例项目，实现播放提前、播放器异步调用和设置封面图等策略。这些策略可单独应用，也可相互搭配。

通过采用这些策略，您可将视频首帧耗时缩短至 100-300 毫秒，为用户呈现极速首帧和流畅丝滑的播放体验，让用户享受到与抖音相媲美的视觉盛宴。

效果对比

以下视频展示了接入短视频场景最佳实践前后的播放效果对比

开源示例项目

下载地址：Android 示例项目。

策略介绍

设置播放源

为接入预加载策略或预渲染策略，您需要使用以下方式设置播放源。

方式一：设置 Vid 播放源

参考以下示例代码设置 Vid 播放源。除了 vid 和 playAuthToken 外，您还需指定 resolution，且此处设置的 resolution 必须和设置预加载源时的 resolution 保持一致。

final String vid = "YOUR_VIDEO_ID"; // appServer 下发
final String playAuthToken = "YOUR_PLAYAUTHTOKEN"; // appServer 下发

final int encodeType = TTVideoEngine.CODEC_TYPE_H264;

// final int encodeType = TTVideoEngine.CODEC_TYPE_h265;
// final int encodeType = TTVideoEngine.CODEC_TYPE_h266;
// 1. 组装 Vid 播放源
StrategySource vidSource = new VidPlayAuthTokenSource.Builder()
        .setVid(vid)
        .setPlayAuthToken(playAuthToken)
        .setEncodeType(encodeType)
        // 设置起播清晰度，此处为 480P。不传使用默认值 360P
        .setResolution(Resolution.High)
        .build();
// 2. 设置播放源
ttVideoEngine.setStrategySource(vidSource);
// 3. 播放
ttVideoEngine.play()

方式二：设置 DirectUrl 播放源

参考以下示例代码设置 DirectUrl 播放源。url、vid 和 cacheKey 均为必填参数。其中：

• vid：视频 ID，可以使用 Vid 或者 Vid 的 MD5 值。

• cacheKey：缓存 key，即 URL 的唯一标识。每个视频可能存在多个不同清晰度的 URL，每个 URL 对应一个 cacheKey，但是多个 URL 对应同一个视频 ID。您可以使用 URL 中不变的部分进行 MD5 操作，将 MD5 值用作 cacheKey。例如，对于 https://www.xxx.com/xxx/x/number， number 之前的部分是不变的。

final String vid = "YOUR_VIDEO_ID"; // 替换成您自己的视频 ID
final String url = "http://www.example.com/h264.mp4"; // 替换成您自己的视频 URL
final String cacheKey = TTVideoEngine.computeMD5(h264Url);

// 1. 组装播放源
StrategySource directUrlSource = new DirectUrlSource.Builder()
        .setVid(vid)
        .addItem(
                new DirectUrlSource.UrlItem.Builder()
                        .setEncodeType(TTVideoEngine.CODEC_TYPE_H264)
                        .setUrl(url)
                        .setCacheKey(cacheKey)
                        .build())
        .build();
       
// 2. 设置播放源
ttVideoEngine.setStrategySource(directUrlSource);
// 3. 播放
ttVideoEngine.play()

接入预加载策略

为接入预加载策略，您需要将视频播放列表传入 SDK 作为预加载源。SDK 会根据您提供的播放列表，在播放当前视频时提前下载后续的视频内容。在此过程中，SDK 会根据当前的播放状态自动管理预加载的时机和配置，例如预加载的并发数和数据大小。

接入预加载策略的具体步骤如下：

1. 调用 enableEngineStrategy 开启预加载策略。

2. 在适当的时机设置预加载源：

   1. 在首次加载播放源数据或在刷新页面以显示新数据的场景中，调用 setStrategySources。

   2. 在加载更多数据的场景中，调用 addStrategySources。

接入预加载策略的示例代码如下：

// 1. 全局开启预加载策略，需要在主线程调用
TTVideoEngine.enableEngineStrategy(STRATEGY_TYPE_PRELOAD, STRATEGY_SCENE_SMALL_VIDEO);

List<StrategySource> sources = new ArrayList<>();
// 2. 重置视频播放列表，首次加载或者下拉刷新时调用
TTVideoEngine.setStrategySources(sources);
// 播放列表有新增时（如上滑加载更多数据），可通过此接口向视频播放列表中增加数据。
// 会在之前设置给 SDK 的列表后累加。
// TTVideoEngine.addStrategySources(sources);

// 3. 设置视频源开始播放，见上文《设置播放源》章节
ttVideoEngine.setStrategySource(strategySource);
ttVideoEngine.play()

接入预渲染策略

为接入预渲染策略，您需要将视频播放列表传入 SDK 作为预渲染源。SDK 会根据您提供的播放列表，在播放当前视频时，提前创建播放器，对播放列表中的下一个视频进行解码和渲染操作。点播 SDK 当前只支持预渲染下一个视频，不支持预渲染上一个视频。
接入预渲染策略的具体步骤如下：

1. 调用 enableEngineStrategy 全局开启预渲染策略。此外，推荐调用 enableReleasePreRenderEngineInstanceByLRU 开启预渲染 engine 释放策略，即根据 LRU (Least Recently Used) 机制释放。

2. 在适当的时机设置预渲染源：

   1. 在首次加载播放源数据或在下拉刷新页面以显示新数据的场景中，调用 setStrategySources 重置播放列表。

   2. 在上滑加载更多数据的场景中，调用 addStrategySources 向播放列表中增加数据。

3. 调用 setEngineStrategyListener 设置预渲染策略回调，再根据自身业务对 engine 实例进行其它操作。例如您可监听 onPreRenderEngineCreated 回调，设置视频填充模式、起播时间等。

4. 调用 getPreRenderEngine 判断预渲染是否完成，处理预渲染封面逻辑。

5. 调用 removePreRenderEngine 判断预渲染是否完成，处理播放逻辑。

   说明

   调用 getPreRenderEngine 和 removePreRenderEngine 均可获取 engine 对象，但存在以下区别：

   • 调用 getPreRenderEngine 获取到的 engine 对象，不会脱离 SDK 内部的预渲染模块，建议不要在业务逻辑中持有该对象。
   • 调用 removePreRenderEngine 获取到的 engine 对象，会脱离 SDK 内部的预渲染模块，您需在业务逻辑中持有该对象并自行管理其释放逻辑。

接入预渲染策略的示例代码如下：

// 1. 全局开启预渲染策略，需要在主线程调用
TTVideoEngine.enableEngineStrategy(STRATEGY_TYPE_PRE_RENDER, STRATEGY_SCENE_SMALL_VIDEO);
// （推荐）开启预渲染 engine 根据 LRU 机制释放
StrategyManager.instance().enableReleasePreRenderEngineInstanceByLRU(true);

// 2. 重置播放列表，首次加载或者下拉刷新时调用。如同时接入预加载策略和预渲染策略，仅需设置一次视频播放列表。
List<StrategySource> sources = new ArrayList<>();
TTVideoEngine.setStrategySources(sources);
// 播放列表有新增时（如上滑加载更多数据），可通过此接口向播放列表中增加数据。
// 会在先前设置给 SDK 的列表后累加。
// TTVideoEngine.addStrategySources(sources);

// 3. 设置 Listener，监听预渲染回调
TTVideoEngine.setEngineStrategyListener(new EngineStrategyListener() {
    @Override
    public void onPreRenderEngineCreated(final TTVideoEngine engine) {
        // SDK 内构造 engine 进行预渲染时回调。
        // 您可监听此回调，对 engine 进行相关设置，如设置 option
       // engine.setIntOption(PLAYER_OPTION_USE_TEXTURE_RENDER, 1); 
    }
});

// 4. 设置预渲染封面。
// 建议在 TextureView 的 SurfaceTextureListener 的 onSurfaceTextureAvailable 中设置。
TTVideoEngine preRenderEngine = TTVideoEngine.getPreRenderEngine(mStrategySource)
if (preRenderEngine != null) {
    // 使用预渲染播放器渲染的首帧作为封面。这里只设置 Surface 渲染封面，业务不用持有 preRenderEngine。
    preRenderEngine.setSurface(surface);
    preRenderEngine.forceDraw();
} else {
    // 使用业务自己的图片加载库加载图片封面
}

// 5. 播放下个视频时，判断预渲染是否完成
TTVideoEngine preRenderEngine = TTVideoEngine.removePreRenderEngine(mStrategySource.vid())
if (preRenderEngine != null) {
    // 不为 null 说明预渲染完成，直接调用播放即可。业务持有这个播放器，负责实例 release。
    preRenderEngine.play();
} else {
    // 为 null 说明无预渲染，您需构造 engine 后播放
}

关闭所有策略

在退出短视频页面或切换到其他页面时调用 clearAllStrategy 关闭所有策略，释放资源。

TTVideoEngine.clearAllStrategy();

注意事项

如果您同时接入预加载策略和预渲染策略，仅需设置一次视频播放列表。