为了帮助您快速搭建“抖音”同款短视频场景,播放器 SDK 基于抖音亿级日活跃用户的真实反馈和大规模实践经验,提供两大最佳策略:预加载策略和预渲染策略。详细功能介绍,请见抖音同款短视频最佳实践。
注意
该功能仅高级版支持。请确保您已购买高级版的 License,详见播放器 License。
注意
预加载策略支持 Vid、 DirectUrl 和 VideoModel 三种形式的播放源。为了确保预加载的缓存能够被成功命中,在设置预加载列表时需要注意以下几点:
resolution 字段,用以确定需要预加载哪一个清晰度的视频。后续实际播放该视频时,通过 setMediaSource 设置的播放源,其 resolution 字段也必须与预加载时设置的 resolution 保持一致,否则将无法命中缓存。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();