You need to enable JavaScript to run this app.
导航

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

最近更新时间2024.01.09 14:56:12

首次发布时间2024.01.09 14:56:12

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

背景信息

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

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

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

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

开源示例项目

下载地址:Android 示例项目

策略介绍

策略说明优化效果

预加载策略

预加载是指在播放当前视频时,提前下载后续视频的数据,以便在切换到下一个视频时实现快速起播,从而优化用户的播放体验。

缩短视频首帧耗时

播放器异步调用建议您使用点播 SDK 提供的异步接口(例如 closeAysnc 异步关闭播放器),避免上下滑动视频时造成 UI 卡顿。具体实现可参考 Android 示例项目提升视频上下滑动的流畅度
设置封面图建议您使用视频默认抽取的非黑首帧作为封面图,以避免在画面尚未渲染时出现黑屏无内容的情况。避免出现黑屏,提升用户体验

设置视频源

使用策略功能,需要使用以下接口设置播放源播放。

方式一:设置 Vid 播放源

参考以下示例代码设置 Vid 播放源。除了 vidplayAuthToken 外,您还需指定 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 播放源。urlvidcacheKey 均为必填参数。其中:

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

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

注意

  • addItem 至少设置 1 个。

  • 必须传入 vidcacheKey ,不能为空。

  • 如果已知 Codec 类型,可通过 setEncodeType 设置。

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_SHORT_VIDEO);

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

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

说明

  • 错误的播放列表会造成预加载失败。

  • 预加载策略会查询到当前播放视频在播放列表中的 index,并预加载 index+1、index+2 ... index+n 的视频

  • 如果您需要自定义预加载机制,可通过 SDK 提供的预加载接口自行实现,详见自定义预加载

关闭预加载策略

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

TTVideoEngine.clearAllStrategy();