HarmonyOS video自定义组件

直接上代码

import { display, window } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  controller: VideoController = new VideoController()
  @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X;
  @State curRateName: number = 1;
  @State isAutoPlay: boolean = false
  @State isStart: boolean = false
  @State showControls: boolean = false
  @State videoSrc: Resource = $rawfile('video1.mp4')
  @State previewUri: Resource = $r('app.media.poster1')
  @State videoIndex: number = 0;
  @State isFullscreen:boolean = false
  @State VideoList: Array = [
    new videoInfo($rawfile('video1.mp4'), $r('app.media.poster1')),
    new videoInfo($rawfile('video2.mp4'), $r('app.media.poster2')),
    new videoInfo($rawfile('video3.mp4'), $r('app.media.poster3')),
    new videoInfo($rawfile('video4.mp4'), $r('app.media.poster4'))
  ]
  @State PlaybackSpeedList: Array = [
    new backSpeedInfo(0.75, PlaybackSpeed.Speed_Forward_0_75_X),
    new backSpeedInfo(1, PlaybackSpeed.Speed_Forward_1_00_X),
    new backSpeedInfo(1.25, PlaybackSpeed.Speed_Forward_1_25_X),
    new backSpeedInfo(1.75, PlaybackSpeed.Speed_Forward_1_75_X),
    new backSpeedInfo(2, PlaybackSpeed.Speed_Forward_2_00_X)
  ]
  windowStage: window.WindowStage = AppStorage.get('windowStage') as window.WindowStage;
  // 获取主窗口的方式
  mainWin: window.Window = this.windowStage.getMainWindowSync();
@State videoHeight:string = '27%'

  getVideo(type:string){
    this.isStart = false
    this.controller.stop()

    if(type === 'left'){
       this.videoIndex --
    }else {
      this.videoIndex ++
    }

    this.VideoList.forEach((item:videoInfo,index)=>{
      if( this.videoIndex === index){
        this.videoSrc = item.videoSrc
        this.previewUri = item.previewUri
      }
    })
    this.isAutoPlay = true
    this.isStart = true
  }

  setWindowFullscreen(){

    // 获取最上层窗口的方式
    window.getLastWindow(getContext(this));
    if(this.isFullscreen){
      this.videoHeight = '100%'
      this.mainWin.setPreferredOrientation(window.Orientation.LANDSCAPE);
    }else {
      this.videoHeight = '27%'
      this.mainWin.setPreferredOrientation(window.Orientation.PORTRAIT);
    }

    // 使用display接口获取当前旋转方向，可以放置在监听中持续获取
    display.getDefaultDisplaySync().rotation;
  }

  build() {
    Column() {
      Stack() {
        Video({
          src: this.videoSrc, //文件路径
          currentProgressRate: this.curRate, //视频播放倍速。number取值仅支持：0.75，1.0，1.25，1.75，2.0。
          previewUri: this.previewUri, //视频未播放时的预览图片路径
          controller: this.controller, //设置视频控制器，可以控制视频的播放状态。

        })
          .width('100%')
          .height('100%')
          .autoPlay(this.isAutoPlay)
          .controls(this.showControls)
        Column() {
          Row() {
            Flex({justifyContent:FlexAlign.SpaceBetween}){
              Row(){
                Image($r('app.media.previous')).width(25).height(25)
                  .onClick(()=>{
                    this.getVideo('left')
                  })
                Image(!this.isStart ? $r('app.media.start') : $r('app.media.stop')).width(25).height(25)
                  .margin({left:10,right:10})
                  .onClick(() => {
                    if (!this.isStart) {
                      //开始播放
                      this.controller.start()
                      this.isStart = true
                    } else {
                      //暂停播放，显示当前帧，再次播放时从当前位置继续播放。
                      this.controller.pause()
                      this.isStart = false
                    }
                  })
                Image($r('app.media.next')).width(20).height(20)
                  .onClick(()=>{
                    this.getVideo('right')
                  })
                Text(`${this.curRateName}x`).width(25).height(25).fontSize(15).fontColor('#fff')
                  .margin({left:20,right:10})
              }
              Image(!this.isFullscreen ? $r('app.media.cancel_big_window') : $r('app.media.big_window')).width(25).height(25)
                .onClick(() => {
                  if (!this.isFullscreen) {
                    this.isFullscreen = true
                  } else {
                    this.isFullscreen = false
                  }
                  this.setWindowFullscreen()
                })
            }
          }
          .width('100%')
          .height('15%')
          .padding({left:5,right:5})
          .backgroundColor('rgba(12, 12, 12, 0.5)')
        }
        .height('100%')
        .justifyContent(FlexAlign.End)
      }
      .height(this.videoHeight)
    }
    .height('100%')
  }
}

export class videoInfo {
  videoSrc: Resource;
  previewUri: Resource;

  constructor(videoSrc: Resource, previewUri: Resource) {
    this.videoSrc = videoSrc
    this.previewUri = previewUri
  }
}

export class backSpeedInfo {
  name: number;
  curRate: PlaybackSpeed;

  constructor(name: number, curRate: PlaybackSpeed) {
    this.name = name
    this.curRate = curRate
  }
}

需要准备4个视频，图片 替换一下