视频进度滑动条的三种实现方式

// VideoDefault.ets 
 
@Entry 
@Component 
struct VideoDefault { 
  private videoController: VideoController = new VideoController() 
 
  build() { 
    Row() { 
      Column() { 
        Video({ 
          src: $rawfile('videoTest.mp4'), 
          controller: this.videoController 
        }) 
          .controls(true) 
          .objectFit(ImageFit.Contain) 
          .loop(false) 
          .autoPlay(true) 
      } 
      .backgroundColor(Color.Black) 
      .width('100%') 
    } 
    .height('100%') 
  } 
}

  // SliderPage.ets 
 
  Video({ 
	src: $rawfile('videoTest.mp4'), 
	controller: this.videoController // VideoController实例 
  }) 
	.controls(false) 
	.autoPlay(true) 
	.loop(true) 
	.objectFit(ImageFit.Contain) 
	.onPrepared((event) => { 
	  this.maxValue = event.duration 
	  this.durationText = convertToTimeFormat(this.maxValue.toFixed()) // 转成时间格式AA:BB 
	}) 
	.onUpdate((event) => { 
	  this.currentValue = event.time 
	})

	// SliderPage.ets 
 
  Slider({ 
	value: this.currentValue, //当前进度值 
	min: 0, 
	max: this.maxValue, 
	style: SliderStyle.OutSet 
  }) 
	.width('75%') 
	.blockColor(Color.White) 
	.trackColor($r('app.color.trackColor')) 
	.selectedColor($r('app.color.selectedColor')) 
	.showSteps(false) 
	.showTips(true) 
	.onChange((value: number, mode: SliderChangeMode) => { 
		this.videoController.setCurrentTime(parseInt(value.toString()), SeekMode.Accurate) 
	})

// CustomVideoPage.ets 
 
import { CustomSlider } from './CustomSlider'; 
import hilog from '@ohos.hilog'; 
import {convertToTimeFormat} from '../utils/DataConversion' 
 
@Entry 
@Component 
struct CustomVideoPage { 
  @State maxSliderLength: number = 0 
  @State positionX: number = 0 
  @State duration: number = 0; 
  @State currentTime: number = 0 
 
  @State showTips: boolean = false 
 
  private videoController: VideoController = new VideoController() 
 
  aboutToAppear() { 
    let windowClass = null; 
    globalThis.windowStage.getMainWindow((err, data) => { 
      windowClass = data; 
 
      let promise = windowClass.getProperties(); 
      promise.then((data) => { 
        this.maxSliderLength = px2vp(data.windowRect.width) * 0.9 
      }) 
    }) 
  } 
 
  build() { 
    Column() { 
      Stack() { 
        Video({ 
          src: $rawfile('videoTest.mp4'), 
          controller: this.videoController 
        }) 
          .controls(false) 
          .autoPlay(true) 
          .objectFit(ImageFit.Contain) 
          .loop(true) 
          .onPrepared((event) => { 
            // 获取视频资源时长，单位（秒） 
            this.duration = event.duration 
          }) 
          .onUpdate((event) => { 
            if (!this.showTips) { 
              // 更新滑块进度值 
              this.positionX = event.time / this.duration * this.maxSliderLength 
              hilog.info(1, 'demo', 'on update modify currentValue ' + this.positionX) 
            } 
          }) 
 
        CustomSlider({ 
          positionX: $positionX, 
          maxSliderLength: $maxSliderLength, 
          duration: $duration, 
          currentTime: $currentTime, 
 
          videoController: this.videoController, 
          showTipsChange: (showTips) => { 
            this.showTips = showTips 
          } 
        }) 
      } 
      .backgroundColor(Color.Black) 
 
      if (this.showTips) { 
        // 用Row画出显示框，提示当前时间 
        Row() { 
          Text(convertToTimeFormat(this.currentTime).toString()) // 转成时间格式AA:BB 
            .fontSize(20) 
            .fontWeight(FontWeight.Bold) 
        } 
        .justifyContent(FlexAlign.Center) 
        .width(100) 
        .height(80) 
        .backgroundColor('#ffe6bbee') 
        .borderRadius(20) 
        .position({ x: '40%', y: '50%' }) 
        .opacity(0.5) 
      } 
    } 
    .justifyContent(FlexAlign.Center) 
    .width('100%') 
    .height('100%') 
  } 
}

// CustomSlider.ets 
 
import hilog from '@ohos.hilog'; 
 
@Component 
export struct CustomSlider { 
  @Link maxSliderLength: number 
  @Link positionX: number 
  @Link duration: number 
  @Link currentTime: number 
 
  @State @Watch('changeShowTips') showTips: boolean = false 
 
  private videoController: VideoController 
  private lastOffset: number = 0 
 
  private showTipsChange: (showTips: boolean) => void; 
 
  changeShowTips() { 
    this.showTipsChange(this.showTips) 
  } 
 
  build() { 
    // 1.用Row组件和Circle画出滑动条及滑块 
    Row() { 
      Row().width(this.positionX).height(10).backgroundColor('#ffee75c6') 
      Row().width(this.maxSliderLength - this.positionX).height(10).backgroundColor('#AFEEEE') 
      Row() { 
        Circle().height(20).width(20).position({ x: -10, y: -5 }).fill(Color.Orange) 
      } 
      .width(30).height(35).position({ x: this.positionX }) 
    } 
    .onTouch((event: TouchEvent) => { 
      // 2.定义其触摸事件onTouch 
      if (event.type === TouchType.Down) { 
        this.showTips = true 
 
        var tmpVal = event.touches[0].x / this.maxSliderLength * this.duration 
        this.positionX = Math.floor(tmpVal) * (this.maxSliderLength / this.duration) 
 
        this.currentTime = this.positionX / this.maxSliderLength * this.duration 
        this.videoController.setCurrentTime(parseInt(this.currentTime.toString()), SeekMode.Accurate); 
      } 
      hilog.info(1, 'demo', 'on change modify currentValue ' + this.positionX) 
 
      if (event.type === TouchType.Up) { 
        this.showTips = false 
      } 
    }) 
    .width('95%') 
    .position({ x: '5%', y: '88%' }) 
    .gesture( 
      // 3.拖动手势PanGesture，更新滑块当前位置和视频当前进度时间 
    PanGesture({}) 
      .onActionUpdate((event: GestureEvent) => { 
        this.showTips = true // 4.在点击滑块或滑块拖动过程中，实时显示当前时间。 
 
        if (this.positionX < 0) { 
          this.positionX = 0 
        } else if (this.positionX > this.maxSliderLength) { 
          this.positionX = this.maxSliderLength 
        } else { 
          this.positionX = this.positionX + event.offsetX - this.lastOffset 
          this.lastOffset = event.offsetX 
        } 
 
        // 更新视频的播放时间 
        this.currentTime = this.positionX / this.maxSliderLength * this.duration 
        this.videoController.setCurrentTime(parseInt(this.currentTime.toString()), SeekMode.Accurate); 
      }) 
      .onActionEnd(() => { 
        this.lastOffset = 0 
        this.showTips = false 
      }) 
    ) 
  } 
}