西瓜视频同款中视频最佳实践

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

背景信息

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

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

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

为了帮助您快速搭建“西瓜视频”同款中视频场景，点播 SDK 基于西瓜视频亿级日活跃用户的真实反馈和大规模实践经验，点播 SDK 封装了预加载策略。通过预加载策略，可将视频首帧耗时缩短至 100-300 毫秒，为用户呈现极速首帧和流畅丝滑的播放体验，让用户享受到与西瓜视频相媲美的视觉盛宴。

开源示例项目

下载地址：iOS 示例项目。

策略介绍

设置视频源

方式一：设置 Vid 播放源

参考以下示例代码设置 Vid 播放源。除了 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];

方式二：设置 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 之前的部分是不变的。

/// 创建播放源
NSString *vid = @"YOUR_VIDEO_ID"; // 替换成您自己的视频 ID
NSString *url = @"http://www.example.com/test.mp4";// 替换成您自己的视频 URL
NSString *cacheKey = [url vloc_md5String];
TTVideoEngineUrlSource *source = [[TTVideoEngineUrlSource alloc] initWithUrl:url cacheKey:cacheKey videoId:vid];

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

/// 播放
[engine play];

接入预加载策略

为接入预加载策略，您需要将视频播放列表传入 SDK 作为预加载源。SDK 会根据您提供的播放列表，在播放当前视频时提前下载后续的视频内容。在此过程中，SDK 会根据当前的播放状态自动管理预加载的时机和配置，例如预加载的并发数和数据大小。
接入预加载策略只需简单的几行代码即可完成。以下是具体的步骤：

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

   /// 开启预加载策略，建议在进入中视频页面开启
   [TTVideoEngine enableEngineStrategy:TTVideoEngineStrategyTypePreload scene:TTVEngineStrategySceneShortVideo];
   

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

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

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

   示例代码如下：

   - (void)configVideoEngineStrategyMediaSources:(NSArray<VEVideoModel *> *)videoModels refresh:(BOOL)refresh {
        NSMutableArray *sources = [NSMutableArray array];
        [videoModels enumerateObjectsUsingBlock:^(VEVideoModel * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
            [sources addObject:[VEVideoModel videoEngineVidSource:obj]];
        }];
        if (refresh) { 
            /// 首次加载或者下拉刷新
            [TTVideoEngine setStrategyVideoSources:sources];
        } else { 
            /// 上拉加载更多
            [TTVideoEngine addStrategyVideoSources:sources];
        }
    }
   

关闭所有策略

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

+ (void)clearAllEngineStrategy;