ArkTS开发系列之基础组件用法的学习(2.3.2下）

上篇回顾 ArkTS开发系列之基础组件用法的学习(2.3.1上）

本篇内容 对video和XComponent的学习使用

一、知识储备

1. video(播放视频的组件）

• 创建

 Video({
         src: this.innerResource,
         previewUri: this.previewUris,
         controller: this.controller
       })

• 使用
  • 加载本地资源

  	@Component
  	struct rawVideo {//应用资源文件
  	  private controller: VideoController;
  	
  	  build() {
  	    Column() {
  	      Video({
  	        src: $rawfile('test.mp4'),
  	        previewUri: $r('app.media.icon'),
  	        controller: this.controller
  	      })
  	    }
  	  }
  	}
  	
  	@Component
  	struct sdCardVideo {  //sd卡
  	  private videoSrc: string = 'file:///data/storage/el2/base/haps/entry/files/show.mp4';
  	  private controller: VideoController;
  	
  	  build() {
  	    Column() {
  	      Video({
  	        src: this.videoSrc,
  	        controller: this.controller
  	      })
  	    }
  	  }
  	}
  

  • 加载网络资源

  private controller: VideoController;
  private videoUrl: string = 'https://zy.yunqishi8.com/upload/mp4/201808/16-29.mp4';
  
  build() {
  Column() {
    Video({
      src: this.videoUrl,
      previewUri: $r('app.media.icon'),
      controller: this.controller
    })
  }
  }
  

• 常用属性

   .muted(false)//设置是否静音
        .controls(false)//是否显示默认控制条
        .autoPlay(false)//是否自动播放
        .loop(false)//是否循环播放
        .objectFit(ImageFit.Contain)//视频适配模式

• 常用回调事件

  .onUpdate((event) => { //更新事件回调

     })
     .onPrepared((event) => { //准备完成事件回调

     })
     .onError(() => { //失败事件回调

     })

2. XComponent（自定义绘制组件）

三、源码剖析

• 自定义播放器控制条

@Component
@Entry
struct VideoPage {
  private controller: VideoController = new VideoController();
  private videoUrl: Resource = $rawfile('test.mp4');
  @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X; //播放倍速
  @State isAutoPlay: boolean = false; //是否自动播放
  @State showController: boolean = false; //是否显示控制条
  @State sliderStartTime: string = '';
  @State currentTime: number = 0;
  @State durationTime: number = 0;
  @State durationStringTime: string = '';

  build() {
    Column() {
      Video({
        src: this.videoUrl,
        previewUri: $r('app.media.icon'),
        controller: this.controller,
        currentProgressRate: this.curRate
      })
        .muted(false) //设置是否静音
        .controls(false) //是否显示默认控制条
        .autoPlay(true) //是否自动播放
        .loop(false) //是否循环播放
          // .objectFit(ImageFit.Contain) //视频适配模式
        .onUpdate((event) => { //更新事件回调
          console.error(`更新： ${event}`)
          this.currentTime = event.time
        })
        .onPrepared((event) => { //准备完成事件回调
          console.error(`准备： ${event}`)
          this.durationTime = event.duration
        })
        .onError(() => { //失败事件回调

          console.error(`error`)
        })

      Row() {
        Text(JSON.stringify(this.currentTime) + 's');
        Slider({
          value: this.currentTime,
          min: 0,
          max: this.durationTime
        })
          .onChange((val, model) => {
            this.controller.setCurrentTime(val)
            console.error(`onChange： ${model}`)
          }).width('90%')
        Text(JSON.stringify(this.durationTime) + 's')
      }.opacity(0.8)
      .width('100%')
    }.width('100%')
    .height('40%')
  }
}

@Component
struct urlVideo { //网络资源文件
  private controller: VideoController;
  private videoUrl: string = 'https://zy.xxxx.com/upload/mp4/201808/16-29.mp4';

  build() {
    Column() {
      Video({
        src: this.videoUrl,
        previewUri: $r('app.media.icon'),
        controller: this.controller
      })
    }
  }
}

@Component
struct rawVideo { //应用资源文件
  private controller: VideoController;

  build() {
    Column() {
      Video({
        src: $rawfile('test.mp4'),
        previewUri: $r('app.media.icon'),
        controller: this.controller
      })
    }
  }
}

@Component
struct sdCardVideo { //sd卡
  private videoSrc: string = 'file:///data/storage/el2/base/haps/entry/files/show.mp4';
  private controller: VideoController;

  build() {
    Column() {
      Video({
        src: this.videoSrc,
        controller: this.controller
      })
    }
  }
}