基于鸿蒙API10的RTSP播放器(五:拖动底部视频滑轨实现跳转)
拖动前播放位置:
拖动后播放位置:
- 在Slider组件中,添加onChange方法进行监听,当视频轨道拖放结束时,触发this.seekTo()函数,其中seekTo函数需要传递一个视频已播放时长作为参数
Slider({
value: this.progressValue,
min: 0,
max: 100,
step: 1,
style: SliderStyle.OutSet
})
.height('20px')
.width('650px')
.blockColor($r('app.color.slider_block_color'))
.trackColor($r('app.color.slider_track_color'))
.selectedColor($r('app.color.slider_selected_color'))
.showSteps(true)
.showTips(true)
.enabled(this.sliderEnable)
.onChange((value: number, mode: SliderChangeMode) => {
LogUtils.getInstance().LOGI("plumcarefree slider-->onChangeStart:" + value);
// 状态值为2时,标志手势离开滑块
if (mode == SliderChangeMode.End) {
// 获取滑块位置
let seekValue = value * (mIjkMediaPlayer.getDuration() / 100);
// 设置视频位置
this.seekTo(seekValue.toString());
}
LogUtils.getInstance().LOGI("plumcarefree slider-->onChangestartEnd:" + value);
})
- 编写seekTo()函数,可以按照自己需求添加一些额外的逻辑。核心函数是继续调用底层的seekTo()函数
seekTo(value: string) {
// if (mIjkMediaPlayer.isPlaying()) {
// mIjkMediaPlayer.pause(); // 先暂停视频
// }
mIjkMediaPlayer.seekTo(value);
// 延迟执行reset和seek操作,确保资源释放完毕
// setTimeout(() => {
// mIjkMediaPlayer.stop(); // mIjkMediaPlayer.reset(); // // 设置新位置并重新播放
// mIjkMediaPlayer.seekTo(value);
// mIjkMediaPlayer.start(); // }, 100);
}