You need to enable JavaScript to run this app.
导航
短视频场景开启预加载和预渲染策略
最近更新时间:2025.12.02 10:32:31首次发布时间:2025.12.02 10:32:31
复制全文
我的收藏
有用
有用
无用
无用

为了帮助您快速搭建“抖音”同款短视频场景,播放器 SDK 基于抖音亿级日活跃用户的真实反馈和大规模实践经验,提供两大最佳策略:预加载策略预渲染策略。详细功能介绍,请见抖音同款短视频最佳实践

注意

该功能仅高级版支持。请确保您已购买高级版的 License,详见播放器 License

接入预加载策略

注意

预加载策略支持 Vid、 DirectUrl 和 VideoModel 三种形式的播放源。为了确保预加载的缓存能够被成功命中,在设置预加载列表时需要注意以下几点:

  • 当播放源为 Vid 或 VideoModel 类型时:​您必须在构建播放源时明确指定 resolution 字段,用以确定需要预加载哪一个清晰度的视频。后续实际播放该视频时,通过 setMediaSource 设置的播放源,其 resolution 字段也必须与预加载时设置的 resolution 保持一致,否则将无法命中缓存。
  • 当播放源为 DirectUrl 类型时:您必须在构建播放源时明确指定 cacheKey 字段,该 cacheKey 只需保证其全局唯一即可。后续实际播放该视频时,通过 setMediaSource 设置的播放源,其 cacheKey 字段也必须与预加载时设置的 cacheKey 保持一致,否则将无法命中缓存。
// 方法定义见 TTVideoEngineStrategy
// 开启预加载策略,建议在进入短视频页面开启
TTVideoEngineStrategy.enableEngineStrategy(
          strategyType: TTVideoEngineStrategyType.preload, scene: TTVideoEngineStrategyScene.smallVideo);
          
// 设置预加载列表
static Future<void> setStrategyVideoSources({required List<TTVideoEngineMediaSource> videoSources})

// 更新预加载列表
static Future<void> addStrategyVideoSources({required List<TTVideoEngineMediaSource> videoSources})

// 指定预加载列表的起始位置。setStrategyVideoSources 后,可通过此方法立即启动预加载任务。
// 若未设置 index,用户进入 feed 后,默认从第二个视频开始加载 N 个;若设置了 index,则从所设 index 位置开始加载 N 个。 
static Future<void> startPreloadWithIndex({required int index})
          
// 关闭全部策略
TTVideoEngineStrategy.clearAllEngineStrategy();

接入预渲染策略

// 方法定义见 TTVideoEngineStrategy
// 开启预渲染策略,建议在进入短视频页面开启
TTVideoEngineStrategy.enableEngineStrategy(
          strategyType: TTVideoEngineStrategyType.preRender, scene: TTVideoEngineStrategyScene.smallVideo);
          
// 设置、更新预渲染列表和预加载列表一致,只需设置一次

// 由于 Android 和 iOS 底层预渲染实现差异,在 Flutter 层针对 Android 和 iOS 提供两个不同的回调,用于通知用户预渲染播放器创建完成

// (Android)监听预渲染播放器创建回调,在回调内创建预渲染播放器,并进行起播前配置(如 HLS 选档、硬解配置等),示例如下:
TTVideoEngineStrategy.init();
TTVideoEngineStrategy.onCreatePreRenderEngine = ((source) async {
        // 该回调仅在 Android 端生效
        VodPlayerFlutter player = VodPlayerFlutter();
        String coreHashHex = await player.createPlayer(vid: source.getVid, preCreated: true);
        // (必须)设置播放源
        player.setUrlSource(source as TTVideoEngineUrlSource);
        
        // (可选)根据需求自定义设置,如是否开启硬解等开关配置
        player.setHardwareDecode(<enable>);
        ...

        return player;
});

// (iOS)SDK 内部会直接完成预渲染播放器的创建,您可以监听预渲染播放器创建完成回调,在回调内对预渲染播放器进行起播前配置(如 HLS 选档、硬解配置等),示例如下:
TTVideoEngineStrategy.onPlayerCreated =  ((player) {
         // 该回调仅在 iOS 端生效
         // 不同于 Android,无需设置播放源
        // (可选)根据需求自定义设置,如是否开启硬解等开关配置
        player.setHardwareDecode(<enable>);
});

// 关闭全部策略
TTVideoEngineStrategy.clearAllEngineStrategy();

使用预渲染首帧作为封面

可使用预渲染完成的视频首帧作为视频封面,展示速度更快,且更节省流量。

// 方法定义见VodPlayerFlutter
// 在创建下一个视频的播放器之前,调用静态方法 preRenderFirstFrame 预渲染视频首帧,如果预渲染成功,返回 vid,否则返回 null

// vid: 待预渲染首帧视频的 vid
// viewId: 渲染 view,用于展示视频首帧
// displayMode: 首帧的填充模式,TTVideoEngineScalingMode
String? res = await VodPlayerFlutter.preRenderFirstFrame(vid: vid, viewId: viewId, displayMode: displayMode);

// 在调用 preRenderFirstFrame 后,创建播放器播放下一个视频
 VodPlayerFlutter player = VodPlayerFlutter();
 String coreHashHex = await player.createPlayer(vid: vid);
 player.setMediaSource(source)
 player.setPlayerContainerView(viewId);
 player.play();