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

最新推荐文章于 2025-12-10 10:55:41 发布

原创

最新推荐文章于 2025-12-10 10:55:41 发布 · 639 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#音视频

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

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

底部滑轨的基本逻辑，通过设置一个定时器，每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(