当前位置：首页 > news >正文

基于鸿蒙API10的RTSP播放器(三：底部视频滑轨进度显示）

news 来源：原创 2024/9/20 4:44:04

界面效果图：
在这里插入图片描述

运行效果图：
在这里插入图片描述

底部滑轨的基本逻辑，通过设置一个定时器，每0.1-0.5秒触发一次来不断更新左侧播放时间和滑块的位置！

// 这里为ArkTS代码，标记为ts只是为了上色好看。注意代码放置位置//1.状态值添加，在buid()函数中添加
// 当前时间  
@State currentTime: string = "00:00";  
// 总时间  
@State totalTime: string = "00:00";
// 进程值，指示了滑轨位置
@State progressValue: number = 0;
// 视频Slider默认不开启交互  
@State sliderEnable: boolean = false;// 1.布局代码
Row(){  Text(this.currentTime).width('60px').fontSize('20px').margin('10px')  // 以下参数内容可以参加官方API文档有关Slider组件的说明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)  
}  
.height('50px')//2.设置定时器，自动更新视频轨道左边的时间，已经视频轨道滑块的位置
// 每隔0.3s执行更新slider操作  
startSliderTimer() {  
// 需要在buid（）函数外面，初始化变量 sliderTimer，设置的目的在于方便关闭定时器sliderTimer = setInterval(() => {  LogUtils.getInstance().LOGI("plumcarefree startSliderTimer");  // 暂未实现，参见步骤7this.setLocation();  }, 300);  
}//3. 关闭定时器函数 
private stopSliderTimer() {  LogUtils.getInstance().LOGI("plumcarefree stopSliderTimer");  clearInterval(sliderTimer);  
}//4.设置定时器触发开始位置
// 这里我是当XComponent组件初始化的时候，直接调用startPlay()函数，
startPlay() {  // 调用play方法播放视频  this.play(this.playerURL);  // 设置底部slider定时器开始this.startSliderTimer();  
}//5.设置定时器触发结束位置
// 退出XComponent后释放资源，避免退出组件后仍然在持续接受流的情况  
releaseMediaPlayer() {  mIjkMediaPlayer.stop();  mIjkMediaPlayer.release();  this.stopSliderTimer()  
}//6.检查XComponent组件代码
XComponent({  id: 'xcomponentId',  type: 'surface',  libraryname: 'ijkplayer_napi'  
})  .onLoad((context?: object) => {  if (!!context) {  this.mContext = context;  this.startPlay();  }  })  .onDestroy(() => {  this.releaseMediaPlayer();  })  .width('100%')//7. 设置步骤二的核心函数，setProgress（）
// 设置视频总时间和当前时间  
setLocation() {  // 获取当前视频播放位置（毫秒）  let position = mIjkMediaPlayer.getCurrentPosition();  // 获取视频总时长（毫秒）  let duration = mIjkMediaPlayer.getDuration();  // 如果视频总时长大于0，则计算进度百分比并更新进度条  if (duration > 0) {  this.sliderEnable = true; // 启用进度条  let percent = position / duration; // 计算当前播放位置占总时长的百分比  let value = percent * 100; // 将百分比转换为进度条值  this.progressValue = value; // 更新进度条值  }  // 格式化视频总时长并更新显示  this.totalTime = this.setTimeFormat(duration);  // 如果当前播放位置超过总时长，则设置为总时长  if (position > duration) {  position = duration;  }  // 格式化当前播放时间并更新显示  this.currentTime = this.setTimeFormat(position);  
}//8. 设置时间格式调整函数
// 时间格式调整函数  
setTimeFormat(duration: number): string {  // 将毫秒转换为秒  let totalSeconds: number | string  = duration / 1000;  // 计算秒数，取余得到不足一分钟的秒数  
let seconds: number | string  =  Math.floor(totalSeconds % 60);// 计算分钟数，取余得到不足一小时的分钟数  let minutes: number | string  = Math.floor(totalSeconds / 60) % 60;  // 计算小时数  let hours: number | string  = Math.floor(totalSeconds / 3600);  // 调用completionNum函数，确保时间显示为两位数  seconds = this.setCompleteNumber(seconds);  minutes = this.setCompleteNumber(minutes);  hours = this.setCompleteNumber(hours);  // 根据小时数决定时间格式  if (hours > 0) {  // 如果小时数大于0，则格式化为小时:分钟:秒  return `${hours}:${minutes}:${seconds}`;  } else {  // 否则只格式化为分钟:秒  return `${minutes}:${seconds}`;  }  
}  // 补全数字为两位数的函数  
setCompleteNumber(num: number): string | number{  // 如果数字小于10，前面补0  return num < 10 ? '0' + num : num;  
}