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

界面效果图:

运行效果图:

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

ts 复制代码
// 这里为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");  
    // 暂未实现,参见步骤7
    this.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;  
}
相关推荐
简鹿办公32 分钟前
如何提取某站 MV 视频中的音乐为 MP3 音频
音视频·简鹿视频格式转换器·视频提取mp3音频
yufengxinpian38 分钟前
集成了高性能ARM Cortex-M0+处理器的一款SimpleLink 2.4 GHz无线模块-RF-BM-2340B1
单片机·嵌入式硬件·音视频·智能硬件
runing_an_min2 小时前
ffmpeg视频滤镜:替换部分帧-freezeframes
ffmpeg·音视频·freezeframes
runing_an_min4 小时前
ffmpeg视频滤镜:提取缩略图-framestep
ffmpeg·音视频·framestep
小曲曲5 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
安静读书8 小时前
Python解析视频FPS(帧率)、分辨率信息
python·opencv·音视频
佑华硬盘拷贝机8 小时前
音频档案批量拷贝:专业SD拷贝机解决方案
音视频
EasyNVR8 小时前
NVR管理平台EasyNVR多个NVR同时管理:全方位安防监控视频融合云平台方案
安全·音视频·监控·视频监控
xcLeigh15 小时前
HTML5超酷响应式视频背景动画特效(六种风格,附源码)
前端·音视频·html5
韩曙亮17 小时前
【FFmpeg】FFmpeg 内存结构 ③ ( AVPacket 函数简介 | av_packet_ref 函数 | av_packet_clone 函数 )
ffmpeg·音视频·avpacket·av_packet_clone·av_packet_ref·ffmpeg内存结构