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

背景信息 #

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

• 视频首帧耗时是指从用户点击开始播放按钮到视频首帧画面展现出来的时间。视频首帧耗时是视频类应用的核心指标之一，直接影响用户的观看体验。如果首帧加载需要几秒钟，用户可能会感到不耐烦，甚至选择放弃观看。短视频场景致力于实现“零首帧”，并不是真正的 0 毫秒起播，而是用户几乎感知不到有首帧耗时的存在。
• 在短视频场景中，用户通常通过上下滑动来浏览不同的视频内容。如果视频在滑动过程中出现卡顿，会阻碍用户观看。提升视频上下滑动的流畅度可以确保用户更为轻松地浏览视频和享受视频内容，提高整体观看流畅度和连贯性，从而增加人均播放量和用户停留时长。

为了帮助您快速搭建“抖音”同款短视频场景，播放器 SDK 基于抖音亿级日活跃用户的真实反馈和大规模实践经验，提供两大最佳策略：预加载策略和预渲染策略。此外，您还可参考示例 Demo，实现播放提前、播放器异步调用和设置封面图等策略。这些策略可单独应用，也可相互搭配。
通过采用这些策略，您可将视频首帧耗时缩短至 100-300 毫秒，为用户呈现极速首帧和流畅丝滑的播放体验，让用户享受到与抖音相媲美的视觉盛宴。

效果对比 #

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

开源示例项目 #

下载地址：iOS 示例项目。

策略介绍 #

设置播放源 #

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

方式 1：设置 Vid 播放源 #

适用于播放已上传至火山引擎视频点播服务的视频。通过视频的 Vid 和其对应的临时播放凭证 PlayAuthToken 来指定播放内容。这两个参数通常由您的业务服务端下发，客户端直接使用即可。详情请见通过临时播放 Token 播放。除了 vid 和 playAuthToken 外，您还需指定 resolution，且此处设置的 resolution 必须和设置预加载源时的 resolution 保持一致。

/// 创建播放源
NSString *vid = @"YOUR_VIDEO_ID"; // appServer 下发
NSString *playAuthToken = @"YOUR_PLAYAUTHTOKEN"; // appServer 下发
TTVideoEngineResolutionType resolution = TTVideoEngineResolutionTypeHD;
TTVideoEngineVidSource *source = [[TTVideoEngineVidSource alloc] initWithVid:vid playAuthToken:playAuthToken resolution:resolution];

/// 设置播放源
[engine setVideoEngineVideoSource:source];

/// 播放
[engine play];

方式 2：设置 DirectUrl 播放源 #

适用于播放来自火山引擎或第三方 CDN 的视频 URL 地址。通过传入视频的直接播放地址来指定播放内容。除了 url，您还必须提供以下两个关键参数：

• vid：视频的唯一标识。可以是您自己的视频管理系统中的唯一标识，也可以在 App 层自行生成一个 ID。此 ID 会用于播放器 SDK 的日志上报、预加载、预渲染等功能中。
• cacheKey：视频的缓存索引 Key。为确保唯一性，推荐使用 URL 的 MD5 值。为确保播放器缓存和下载功能的稳定性，强烈建议您遵循以下规范来设置 cacheKey：
  • 使用字符范围：cacheKey 的取值应仅包含字母 (a-z, A-Z) 和数字 (0-9)。
  • 避免特殊符号：不要在 cacheKey 中使用任何特殊符号，例如 _、-、/、?、& 等。

/// 创建播放源
NSString *vid = @"YOUR_VIDEO_ID"; // 替换成您自己的视频 ID
NSString *url = @"http://www.example.com/test.mp4";// 替换成您自己的视频 URL
NSString *cacheKey = @"<YOUR_VIDEO_CACHE_KEY>"; // 替换为该视频文件的唯一缓存标识；同一文件保持一致，不同文件使用不同标识
TTVideoEngineUrlSource *source = [[TTVideoEngineUrlSource alloc] initWithUrl:url cacheKey:cacheKey videoId:vid];

/// 设置播放源
[engine setVideoEngineVideoSource:source];

/// 播放
[engine play];

接入预加载策略 #

为接入预加载策略，您需要将视频播放列表传入 SDK 作为预加载源。SDK 会根据您提供的播放列表，在播放当前视频时提前下载后续的视频内容。

使用默认的预加载策略 #

您可使用默认的预加载策略，使用火山引擎内部沉淀的、可平衡播放器体验和成本的预加载策略配置。SDK 会根据当前的播放状态自动管理预加载的时机和配置，例如预加载的并发数和数据大小。
具体步骤如下：

1. 在进入短视频页面时，调用 enableEngineStrategy:scene: 开启预加载策略。
2. 在适当的时机设置预加载源：
   1. 在首次加载播放源数据或在刷新页面以显示新数据的场景中，调用 setStrategyVideoSources:
   2. 在加载更多数据的场景中，调用 addStrategyVideoSources:

示例代码如下：

- (void)startPreloadStrategy {
    // 开启预加载策略，建议在进入短视频页面开启
    [TTVideoEngine enableEngineStrategy:TTVideoEngineStrategyTypePreload scene:TTVEngineStrategySceneSmallVideo];
}

// 设置预加载源
- (void)configVideoEngineStrategyMediaSources:(NSArray<id<TTVideoEngineMediaSource>> *)sources refresh:(BOOL)refresh {
    if (refresh) { 
        // 首次加载或者下拉刷新
        [TTVideoEngine setStrategyVideoSources:sources];
    } else { 
        // 上拉加载更多
        [TTVideoEngine addStrategyVideoSources:sources];
    }
}

自定义预加载策略配置 #

如果您对于预加载策略有特殊的需求，例如在业务初期成本压力不大且想要获得更好的播放体验，则可自定义预加载策略配置。

示例代码如下：

- (void)startPreloadStrategy {
    // 初始化预加载配置
    TTVideoEngineStrategyPreloadConfig *config = [[TTVideoEngineStrategyPreloadConfig alloc] init];
    config.count = 3; // 预加载视频个数，不建议值设置过大会造成成本的浪费，短视频场景建议设置 3-5 个
    config.size = 800; // 预加载视频大小，单位为 KB，不建议值设置过大会造成成本的浪费，10 分钟内短视频建议设置 800 KB
    config.startBufferLimit = 15; // 预加载开始时机，单位为秒，例如设置 15 则表示播放器的缓冲水位达到 15 秒及以上开始去预加载视频，原则是优先保证当前播放视频的网络带宽，短视频建议设置 15 秒
    config.stopBufferLimit = 5; // 预加载停止时机，单位为秒，例如设置 5 则表示播放器的缓冲水位小于 5 秒则会取消当前的预加载任务，优先保证当前播放视频的网络带宽，短视频建议设置 5 秒
    // 开启预加载策略 
    [TTVideoEngine enableEnginePreloadStrategy:config scene:TTVEngineStrategySceneSmallVideo];    
}

// 设置预加载源
- (void)configVideoEngineStrategyMediaSources:(NSArray<id<TTVideoEngineMediaSource>> *)sources refresh:(BOOL)refresh {
    if (refresh) { 
        // 首次加载或者下拉刷新
        [TTVideoEngine setStrategyVideoSources:sources];
    } else { 
        // 上拉加载更多
        [TTVideoEngine addStrategyVideoSources:sources];
    }
}

接入预渲染策略 #

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

接入预渲染策略的具体步骤如下：

1. 在用户进入短视频页面时，调用 enableEngineStrategy:scene: 开启预渲染策略。示例代码如下：

   /// 开启预渲染策略，建议在进入短视频页面开启
   [TTVideoEngine enableEngineStrategy:TTVideoEngineStrategyTypePreRender scene:TTVEngineStrategySceneSmallVideo];
   

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

   1. 在首次加载播放源数据或在刷新页面以显示新数据的场景中，调用 setStrategyVideoSources:
   2. 在加载更多数据的场景中，调用 addStrategyVideoSources:
      示例代码如下：

   - (void)configVideoEngineStrategyMediaSources:(NSArray<id<TTVideoEngineMediaSource>> *)sources refresh:(BOOL)refresh {
       if (refresh) { 
           // 首次加载或者下拉刷新
           [TTVideoEngine setStrategyVideoSources:sources];
       } else { 
           // 上拉加载更多
           [TTVideoEngine addStrategyVideoSources:sources];
       }
   }
   

   注意

   • 预渲染策略会查询到当前播放视频在播放列表中的 index，预渲染 index+1 视频源。
   • 仅支持预渲染 1 个视频。

3. （可选）调用 setPreRenderVideoEngineDelegate: 设置预渲染策略回调，再根据自身业务需要对 Engine 实例进行其它设置，例如设置视频填充模式、起播时间等。

   // 设置预渲染策略回调
   + (void)setPreRenderVideoEngineDelegate:(id<TTVideoEnginePreRenderDelegate>)delegate;
   

4. 调用 getPreRenderVideoEngineWithVideoSource: 判断预渲染是否完成，然后处理播放逻辑。示例代码如下：

   /// 通过播放视频 Source 查询是否已经预渲染完成
   TTVideoEngine *preRenderVideoEngine = [TTVideoEngine getPreRenderVideoEngineWithVideoSource:mediaSource];
   if (preRenderVideoEngine) {
       /// 预渲染完成，直接调用播放即可
       [preRenderVideoEngine play];
   } else {
       /// 预渲染未完成，创建 TTVideoEngine 播放
   }
   

预渲染结合指定起播时间 #

该功能自 iOS 播放器 SDK 1.52.1.8 起支持。

如果需要同时使用预渲染和指定起播时间，请通过 setPreRenderVideoEngineDelegate: 设置预渲染代理，并在代理的 videoEngine:willPreRenderSource: 回调中完成以下配置：

1. 将 VEKKeyPlayerEnableStartTimeSkipAVSkipSerial 设为 YES。同时使用起播时间与预渲染时，必须开启该选项。
2. 通过 VEKKeyPlayerStartTime_CGFloat 设置预渲染播放器的起播时间，单位为秒。

以下示例演示从第 5 秒开始预渲染。请将此方法添加到您的 TTVideoEnginePreRenderDelegate 实现中，并根据业务需求设置起播时间。

- (void)videoEngine:(TTVideoEngine *)videoEngine willPreRenderSource:(id<TTVideoEngineMediaSource>)source {
    NSTimeInterval startTime = 5.0;
    // 同时使用起播时间与预渲染时必须开启。
    [videoEngine setOptionForKey:VEKKeyPlayerEnableStartTimeSkipAVSkipSerial value:@YES];
    // 设置预渲染播放器的起播时间。
    [videoEngine setOptionForKey:VEKKeyPlayerStartTime_CGFloat value:@(startTime)];
}

关闭所有策略 #

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

• 取消当前预加载和预渲染的任务。
• 如果开启了预渲染策略，会释放预渲染的播放器实例。
• 释放所有的播放源数据。

示例代码如下：

- (void)close { 
    [TTVideoEngine clearAllEngineStrategy]; 
}

注意事项 #

• 如果您同时接入预加载策略和预渲染策略，仅需设置一次视频播放列表。
• 如果您的 App 存在多个短视频页签切换或者多个短视频页面嵌套的场景时，需要注意清除策略的时机。假设 A 页面和 B 页面都是短视频场景，可以通过以下两种方式在页面跳转时处理策略和播放源列表：
  • （推荐）方式一：
    • 从 A 页面跳转至 B 页面：进入 A 页面时开启策略 -> 设置 A 页面的播放源列表 -> 离开 A 页面时关闭策略 -> 进入 B 页面时开启策略 -> 设置 B 页面的播放源列表
    • 从 B 页面跳转回 A 页面：离开 B 页面时关闭策略 -> 返回 A 页面时开启策略 -> 重新设置A页面的播放源列表
  • 方式二：
    • 从 A 页面跳转至 B 页面：进入 A 页面时开启策略 -> 设置 A 页面的播放源列表 -> 进入 B 页面时设置 B 页面的播放源列表
    • 从 B 页面跳转回 A 页面：返回 A 页面时重新设置 A 页面的播放源列表 -> 离开 A 页面时再关闭策略