鸿蒙Next视频播放增加全屏和音量亮度调节 原创 精华

上篇实现了视频的播放和进度控制，这篇在上一篇的基础上，增加实现横屏视频全屏播放，全屏时，上下滑动屏幕调节音量和亮度。
看一下实现效果：

实现步骤：

实现全屏：

1.定义切换方法，根据当前page是否是沉浸式，做相应的操作,在点击全屏按钮时调用该方法

async handleFullScreen() {
    if(this.isFullScreen){
      //设置主窗口或子窗口的布局是否为沉浸式布局
      this.mainWin.setWindowLayoutFullScreen(false)
      //设置窗口全屏模式时状态栏、底部导航区域是否显示  []，则不显示
      this.mainWin.setWindowSystemBarEnable(['status', 'navigation']);
      this.mainWin.setPreferredOrientation(window.Orientation.PORTRAIT)

    }else {
      this.mainWin.setWindowLayoutFullScreen(true)
      this.mainWin.setWindowSystemBarEnable([]);
      this.mainWin.setPreferredOrientation(window.Orientation.LANDSCAPE)
    }
    this.isFullScreen = !this.isFullScreen
  }

2.窗口变化之后，需要重新修改XComponent的长宽，让视频能充满屏幕，因此需要在屏幕旋转完成之后进行重新计算。setPreferredOrientation的回调只能返回调用是否成功。因此需要监听window的窗口事件

private windowStage: window.WindowStage = AppStorage.get('windowStage') as window.WindowStage;
private mainWin: window.Window = this.windowStage.getMainWindowSync();

aboutToAppear(): void {
...
 this.mainWin.on('windowSizeChange', (data) => {
      this.autoVideoSize()
    })
...
}
//重新计算视频展示长宽
autoVideoSize() {
  display.getAllDisplays((err, data) => {
    let screenWidth = data[0].width;
    let screenHeight = data[0].height;
    let videoRatio: number = Number(this.videoWidth) / Number(this.videoHeight);
    let screenRatio = screenWidth / screenHeight;
    if (videoRatio > screenRatio) {
      this.XComponentWidth = this.getUIContext().px2vp(screenWidth);
      this.XComponentHeight = this.getUIContext().px2vp(this.videoHeight * screenWidth / this.videoWidth);
    } else {
      this.XComponentWidth = this.getUIContext().px2vp(this.videoWidth * screenHeight / this.videoHeight);
      this.XComponentHeight = this.getUIContext().px2vp(screenHeight);
    }
  });
}

滑动控制音量组件

1.添加系统组件AVVolumePanel

AVVolumePanel({
              volumeLevel: this.volume,
              volumeParameter: {   //设置音量控制条显示位置，不设置在默认位置显示
                position: {
                  x: 150,
                  y: 300
                }
              }
            })

2.获取当前媒体音量

let groupId: number = audio.DEFAULT_VOLUME_GROUP_ID;
let audioManager = audio.getAudioManager();
let audioVolumeManger: audio.AudioVolumeManager = audioManager.getVolumeManager();
//获取音频组管理器
audioVolumeManger.getVolumeGroupManager(groupId, (err: BusinessError, value: audio.AudioVolumeGroupManager) => {
  if (err) {
    console.info('AVPlayer', `Failed to obtain the colume group infos list. ${err}`);
    return;
  }
  let audioVolumeGroupManager = value;
  console.info('AVPlayer', `Callback invoked to indicate that the volume group infos list is obtained.`);

  //获取指定流类型的音量
  audioVolumeGroupManager.getVolume(audio.AudioVolumeType.MEDIA, (err: BusinessError, value: number) => {
    if (err) {
      console.info('AVPlayer', `Failed to obtain the volume. ${err}`);
      return;
    }
    this.volume = value;
    console.info('AVPlayer', `Callback invoked to indicate that the volume is obtained. ${value}`);
  });
  //获取指定流的最大音量
  audioVolumeGroupManager.getMaxVolume(audio.AudioVolumeType.MEDIA, (err: BusinessError, value: number) => {
    if (err) {
      console.info('AVPlayer', `Failed to obtain the maximum volume. ${err}`);
      return;
    }
    console.info('AVPlayer', `Callback invoked to indicate that the maximum volume is obtained. ${value}`);
  });
  //获取指定流的最小音量
  audioVolumeGroupManager.getMinVolume(audio.AudioVolumeType.MEDIA, (err: BusinessError, value: number) => {
    if (err) {
      console.info('AVPlayer', `Failed to obtain the minimum volume. ${err}`);
      return;
    }
    console.info('AVPlayer', `Callback invoked to indicate that the minimum volume is obtained. ${value}`);
  });
});

音频流类型

滑动控制亮度组件

1.自定义一个Slider显示亮度

Stack() {
  Slider({
    value: this.screenBrightness,
    min: 0,
    max: 1,
    step: 0.1,
    style: SliderStyle.NONE,
    direction: Axis.Vertical,
    reverse: true
  })
    .visibility(this.visible ? Visibility.Visible : Visibility.Hidden)
    .height(160)
    .selectedColor(Color.White)
    .trackColor(Color.Black)
    .trackThickness(40)

  Image($r('app.media.sun_max_fill'))
    .visibility(this.visible ? Visibility.Visible : Visibility.Hidden)
    .margin({ top: 120 })
    .width(20)
    .height(20)
}

2.获取初始屏幕亮度值，取值0-1

settings.getValue(context, settings.display.SCREEN_BRIGHTNESS_STATUS, settings.domainName.DEVICE_SHARED)
  .then((value) => {
    console.info('AVPlayer', `Promise:value -> ${JSON.stringify(value)}`);
    this.screenBrightness = Number(value);
  })

滑动手势处理

全屏时给屏幕组件增加手势事件

gesture(
  PanGesture({ direction: PanDirection.Vertical })
    .onActionUpdate((event: GestureEvent) => {
      if(!this.isFullScreen)return
      // 触摸横屏左侧区域 调节音量
      if (event.fingerList[0].globalX < px2vp(display.getDefaultDisplaySync().width/2)) {
        this.visible = false;
        let curVolume = this.volume - vp2px(event.offsetY) / display.getDefaultDisplaySync().height;
        curVolume = curVolume >= 15.0 ? 15.0 : curVolume;
        curVolume = curVolume <= 0.0 ? 0.0 : curVolume;
        this.volume = curVolume;
        console.info('AVPlayer', `this volume is: ` + this.volume);
      }else {
        this.visible = true;
        let curBrightness = this.screenBrightness - vp2px(event.offsetY) / display.getDefaultDisplaySync().height;
        curBrightness = curBrightness >= 1.0 ? 1.0 : curBrightness;
        curBrightness = curBrightness <= 0.0 ? 0.0 : curBrightness;
        this.screenBrightness = curBrightness;
        console.info('AVPlayer', `event.offsetY is: ` + event.offsetY);
        console.info('AVPlayer', `this brightness is: ` + this.screenBrightness);
        try {
          this.mainWin.setWindowBrightness(this.screenBrightness)
        } catch (exception) {
        }
      }
    })
    .onActionEnd(() => {
      setTimeout(() => {
        this.visible = false;
      }, 3000)
    })
)