ShortVideoApp视频播放模块二

一、实现视频播放器的 开始、暂停方法

• 1.用视频状态实现视频播放器的开始、暂停方法；
• 2.设置视频播放器的点击事件
• 3.在视频上设置开始按钮

二、基于Flex布局实现视频分类页签

• Flex布局--弹性--主轴和交叉轴--自动对齐动作 developer.huawei.com/consumer/cn…

• 使用Flex布局实现视频分类页签

@Component
export struct VideoClassificationTab{
  build() {
    Row(){
      // Flex主轴方向元素等间距布局
      // 相邻子组件之间的间距，第一个子组件与主轴起始端的间距、最后一个子组件到主轴终点端的间距均相等
      Flex({justifyContent:FlexAlign.SpaceEvenly}){
        Text('直播')
          .fontColor('#FEFEFE')
          .fontSize(18)

        Text('同城')
          .fontColor('#FEFEFE')
          .fontSize(18)

        Text('关注')
          .fontColor('#FEFEFE')
          .fontSize(18)

        Text('推荐')
          .fontColor('#FEFEFE')
          .fontSize(18)

        Text('搜索')
          .fontColor('#FEFEFE')
          .fontSize(18)
      }
    }
  }
}

• 在视频播放界面添加视频分类

VideoView.ets
build() {
  //层叠布局
  Stack(){
    //视频播放器--填参数用以构造Video组件
    Video({
      src:$rawfile(this.videoInfo.videoPath),
      previewUri:$rawfile(this.videoInfo.coverPath),
      controller:this.videoController
    })
      .controls(true) //设置显示默认控制器
      .autoPlay(this.playState === PlayState.START ? true :false) //判断是否自动播放
      .objectFit(ImageFit.Contain) //视频适配模式，Contain为保持宽高比进行缩小或者放大
      .loop(true)//设置循环播放
      .width('100%')
      .height('100%')
      .onClick(() => this.handleOnClick())//设置点击事件
    //视频开始按钮
    Image($r('app.media.ic_public_play'))
      .width(50)
      .height(50)
      .visibility(this.playState === PlayState.START ? Visibility.Hidden : Visibility.Visible)
      .onClick(()=>this.handleOnClick())//设置点击事件
    //视频分类页签
    VideoClassificationTab().position({x:0,y:0})//绝对定位
    //视频信息展示区
    //侧边操作栏
  }
  .backgroundColor(Color.Black)
  .width('100%')
  .height('100%')
}

/*播放*/
play():void{
  // 修改播放状态为START
  if (this.playState != PlayState.START) {
    this.playState = PlayState.START;
  }
  //通过控制器执行播放
  this.videoController.start();
}
/*暂停*/
pause():void{
  // 修改播放状态为 PAUSE
  if (this.playState != PlayState.PAUSE) {
    this.playState = PlayState.PAUSE;
  }
  //通过控制器执行暂停
  this.videoController.pause();
}
/*停止*/
stop():void{
  // 修改播放状态为STOP
  if (this.playState != PlayState.STOP) {
    this.playState = PlayState.STOP;
  }
  //通过控制器执行播放
  this.videoController.stop();
}

/*点击处理*/
handleOnClick():void{
  if (this.playState === PlayState.START) {
    this.pause();
  }else if (this.playState === PlayState.PAUSE || this.playState === PlayState.STOP){
    this.play();
  }
}
```