OpenHarmony仿视频播放器应用-爱电影（三）

import { VideoView } from '../view/VideoView';
import { PLAYBACK_SPEED, PLAYBACK_STATE } from '../model/Playback'
import router from '@ohos.router';
import { VideoListView } from '../view/VideoListView'
import { VideoData } from '../model/VideoData'
import { MockVideoData } from '../model/MockVideoData'
import { VideoDataUtils } from '../utils/VideoDataUtils'
import { VideoIntroduceView } from '../view/VideoIntroduceView'
import { VideoSpeed } from '../model/VideoSpeed'
import emitter from '@ohos.events.emitter';
import { CommonData } from '../model/CommonData'
/**
 * 视频播放页面
 */
const TAG: string = 'Playback'
@Entry
@Component
struct Playback {
  @State mTag: string = TAG
  private name: string
  private introduction: string
  @State uri: any = null
  @State previewImage: any = null
  private actors: string | Resource
  private directs: string | Resource
  @State rateIndex: number = 1
  @State rate: VideoSpeed = PLAYBACK_SPEED[1]
  @State @Watch('scrollChange') scrollIndex: number = 0
  @State likeVideoList: Array<VideoData> = []
  private scrollerForScroll: Scroller = new Scroller()
  @State isShowIntroduce: boolean = false // 是否显示简介
  @State mVideoData: VideoData = null
  @State isScrollClose: boolean = false
  @Provide('play_time') curTime: number = 0
  @State videoState: string = PLAYBACK_STATE.INIT
  @Provide('show_operation') isShowOperation: boolean = true
  aboutToAppear() {
    console.info(`${TAG} aboutToAppear curTime:${this.curTime}`)
    this.initData()
  }
  initData() {
    this.likeVideoList = MockVideoData.getVideoList()
    // 获取当前需要播放的电影资源信息
    this.mVideoData = router.getParams()['video_data']
    this.name = this.mVideoData.name
    this.uri = this.mVideoData.uri
    this.previewImage = this.mVideoData.image
    this.actors = VideoDataUtils.getUser(this.mVideoData.actors)
    this.directs = VideoDataUtils.getUser(this.mVideoData.directs)
    this.introduction = this.mVideoData.introduction
  }
  onCloseIntroduce() {
    this.isShowIntroduce = false
  }
  onScreen(isFull: boolean) {
    console.info(`${TAG} onScreen ${isFull} mVideoData:${JSON.stringify(this.mVideoData)} curTime:${this.curTime} videoState:${this.videoState}`)
    if (isFull) {
      router.pushUrl({
        url: 'pages/FullScreen',
        params: {
          video_data: this.mVideoData,
          cur_time: this.curTime, // 当前播放时间
          video_state: this.videoState // 播放状态
        }
      })
    }
  }
  scrollChange() {
    if (this.scrollIndex === 0) {
      this.scrollToAnimation(0, 0)
    } else if (this.scrollIndex === 2) {
      this.scrollToAnimation(0, 280)
    }
  }
  onPageShow() {
    // 竖屏显示
    emitter.emit({
      eventId: CommonData.EVENT_WINDOW_PORTRAIT_ID
    })
  }
  onPageHide() {
    console.info(`${TAG} onPageHide`)
  }
  scrollToAnimation(xOffset, yOffset) {
    this.scrollerForScroll.scrollTo({
      xOffset: xOffset,
      yOffset: yOffset,
      animation: {
        duration: 3000,
        curve: Curve.FastOutSlowIn
      }
    })
  }
  build() {
    Stack() {
      Column() {
        Stack({
          alignContent: Alignment.TopStart
        }) {
          VideoView({
            _TAG: this.mTag,
            videoUri: $uri,
            previewUri: $previewImage,
            videoRate: $rate,
            videoRateIndex: $rateIndex,
            onScreen: this.onScreen.bind(this),
            isFullScreen: false,
            videoState: $videoState,
            isEvent: true,
            mWidth: '100%',
            mHeight: '100%'
          })
            .margin({
              top: 15,
              bottom: 15
            })
          if (this.isShowOperation) {
            Row({ space: 10 }) {
              Image($r('app.media.icon_back'))
                .width(24)
                .height(24)
                .objectFit(ImageFit.Cover)
                .onClick(() => {
                  router.back()
                })
              Text(this.name)
                .fontSize(20)
                .fontColor(Color.White)
            }
            .padding(20)
          }
        }.width('100%')
        .height('40%')
        .backgroundColor(Color.Black)
        // 介绍
        Column() {
          Scroll(this.scrollerForScroll) {
            Column() {
              // 简介内容
              Column() {
                // 标题
                Row() {
                  Text(this.name)
                    .fontColor(Color.Black)
                    .fontSize(26)
                    .width('88%')
                  Row() {
                    Text($r('app.string.introduce'))
                      .fontColor($r('app.color.introduce_text'))
                      .fontSize(16)
                    Image($r('app.media.icon_right'))
                      .width(16)
                      .height(20)
                      .objectFit(ImageFit.Contain)
                  }.onClick(() => {
                    console.info(`CLICK 设置前 isShowIntroduce ${this.isShowIntroduce}`)
                    this.isScrollClose = false
                    this.isShowIntroduce = true
                    console.info(`CLICK 设置后 isShowIntroduce ${this.isShowIntroduce}`)
                  })
                }
                .justifyContent(FlexAlign.Start)
                .alignItems(VerticalAlign.Bottom)
                .width('100%')
                .height('40')
                .border({
                  width: 0,
                  color: Color.Gray
                })
                // 简介
                Column() {
                  Row({ space: 15 }) {
                    Text($r('app.string.directs'))
                      .fontColor($r('app.color.introduce_title_text'))
                      .fontSize(16)
                    Text(this.directs)
                      .fontColor($r('app.color.introduce_text'))
                      .fontSize(14)
                  }.justifyContent(FlexAlign.Start)
                  .width('100%')
                  .margin({
                    top: 5,
                    bottom: 5
                  })
                  Text($r('app.string.actors'))
                    .fontColor($r('app.color.introduce_title_text'))
                    .fontSize(16)
                    .margin({
                      top: 5,
                      bottom: 5
                    })
                    .width('100%')
                  Text(this.actors)
                    .fontColor($r('app.color.introduce_text'))
                    .fontSize(14)
                    .width('100%')
                    .margin({
                      top: 5,
                      bottom: 5
                    })
                  Text(this.introduction)
                    .fontColor($r('app.color.introduce_text'))
                    .fontSize(16)
                    .width('100%')
                    .lineHeight(26)
                    .maxLines(2)
                    .textOverflow({
                      overflow: TextOverflow.Ellipsis
                    })
                    .margin({
                      top: 5,
                      bottom: 5
                    })
                }
                .width('100%')
                .height(150)
                .justifyContent(FlexAlign.Start)
                .margin({
                  top: 20,
                  bottom: 20
                })
                .border({
                  width: 0,
                  color: Color.Green
                })
                Text($r('app.string.guess_like'))
                  .fontColor(Color.Black)
                  .fontSize(18)
                  .width('100%')
              }
              .width('100%')
              .height('280')
              .border({
                width: 0,
                color: Color.Red
              })
              // 猜你喜欢
              VideoListView({
                videoList: $likeVideoList,
                scrollIndex: $scrollIndex,
                isBlackModule: true
              })
            }
          }
          .scrollBar(BarState.Off)
        }
        .width('95%')
        .height('55%')
        .backgroundColor(Color.White)
        .padding(20)
        .margin(30)
        .border({
          radius: 20
        })
      }.width('100%')
      .height('100%')
      // 电影简介弹窗
      Panel(this.isShowIntroduce) {
        VideoIntroduceView({
          videoData: $mVideoData,
          onClose: this.onCloseIntroduce.bind(this),
          isScrollClose: this.isScrollClose
        })
      }
      .type(PanelType.Foldable) //  内容永久展示
      .mode(PanelMode.Half)
      .dragBar(false)
      .halfHeight(500)
      .onChange((width, height, mode) => {
        console.info(`${TAG} Panel onChange ${JSON.stringify(mode)}`)
        if (mode === PanelMode.Mini) {
          this.isShowIntroduce = false
          this.isScrollClose = true
        }
      })
    }
    .width('100%')
    .height('100%')
    .backgroundImage($r('app.media.main_bg'), ImageRepeat.XY)
  }
}

/**
 * 视频播放器视图
 */
import { PLAYBACK_SPEED, PLAYBACK_STATE } from '../model/Playback'
import { TimeUtils } from '../utils/TimeUtils'
import { VideoSpeed } from '../model/VideoSpeed'
import emitter from '@ohos.events.emitter';
import { CommonData } from '../model/CommonData'
const TAG: string = 'VideoView'
@Component
export struct VideoView {
  @Prop _TAG: string
  @Link videoUri: any
  @Link previewUri: any
  @Link videoRate: VideoSpeed
  @Link videoRateIndex: number
  @Prop mWidth: string
  @Prop mHeight: string
  private videoController: VideoController = new VideoController()
  @Link videoState: string
  @Consume('play_time') curTime: number
  @State curTimeStr: string = '00:00:00'
  @State durationCountStr: string = '00:00:00'
  @State curSliderValue: number = 0
  private durationNumber: number = 0
  private selectSpeedOption: Array<SelectOption>
  onScreen: (isFull: boolean) => void
  @Prop isFullScreen: boolean
  @State isAutoPlay: boolean = false // 是否自动播放
  private lastTime: number
  isEvent: boolean // 是否需要注册事件
  @Consume('show_operation') isShowOperation: boolean // 是否显示操作视图
  private timeID: number
  aboutToAppear() {
    console.info(`${TAG} ${this._TAG} aboutToAppear`)
    if (this.isEvent) {
      this.registerEmitter()
    }
    this.startTime()
    // 初始化播放倍数
    this.selectSpeedOption = new Array<SelectOption>()
    for (const item of PLAYBACK_SPEED) {
      let option: SelectOption = {
        value: item.val
      }
      this.selectSpeedOption.push(option)
    }
    this.updateVideo(this.curTime, this.videoState, 'aboutToAppear')
  }
  updateVideo(time: number, state: string, tag: string) {
    console.info(`${TAG} ${this._TAG} ${tag} updateVideo time: ${time} state: ${state}`)
    if (state === PLAYBACK_STATE.START) {
      console.info(`${TAG} ${this._TAG}  updateVideo start`)
      this.isAutoPlay = true
      this.lastTime = time
      this.vSetTime(time)
      //      this.videoController.start()
    } else {
      console.info(`${TAG} ${this._TAG}  updateVideo stop`)
      this.isAutoPlay = false
      this.videoController.stop()
    }
  }
  aboutToDisappear() {
    console.info(`${TAG} ${this._TAG}  aboutToDisappear`)
    this.destroy()
  }
  registerEmitter() {
    emitter.on({
      eventId: CommonData.EVENT_PLAY_VIDEO
    }, (event) => {
      console.info(`${TAG} ${this._TAG} ${CommonData.EVENT_PLAY_VIDEO} callback : ${JSON.stringify(event)}`)
      let params = event.data
      if (params.hasOwnProperty('cur_time')) {
        this.lastTime = params['cur_time']
        console.info(`${TAG} ${this._TAG} Emitter getParams curTime: ${this.curTime}`)
      }
      if (params.hasOwnProperty('video_state')) {
        this.videoState = params['video_state']
        console.info(`${TAG} ${this._TAG} Emitter getParams curTime: ${this.videoState}`)
      }
      console.info(`${TAG} ${this._TAG} Emitter getParams curTime: ${this.videoState}`)
      this.updateVideo(this.lastTime, this.videoState, 'emitter')
    })
  }
  unregisterEmitter() {
    emitter.off(CommonData.EVENT_PLAY_VIDEO)
  }
  vSetTime(time: number) {
    console.info(`${TAG} ${this._TAG}  vSetTime curTime: ${time}`)
    this.videoController.setCurrentTime(time, SeekMode.Accurate)
  }
  clickStartOrPause() {
    if (this.videoState === PLAYBACK_STATE.START) {
      this.videoController.pause()
    } else {
      this.videoController.start()
    }
  }
  startTime() {
    if (this.timeID > 0) {
      this.stopTime()
    }
    this.timeID = setTimeout(() => {
      this.isShowOperation = false
    }, 5000)
  }
  stopTime() {
    clearTimeout(this.timeID)
    this.timeID = -1
  }
  destroy() {
    this.videoController.stop()
    if (this.isEvent) {
      this.unregisterEmitter()
    }
    this.stopTime()
  }
  build() {
    Stack({
      alignContent: Alignment.BottomStart
    }) {
      // 视频播放
      Video({
        src: 'https://vd4.bdstatic.com/mda-jdmyw860sqcu8utw/sc/mda-jdmyw860sqcu8utw.mp4',
        previewUri: this.previewUri,
        currentProgressRate: this.videoRate.speed,
        controller: this.videoController
      })
        .width('100%')
        .backgroundColor('#000000')
        .controls(false)
        .autoPlay(this.isAutoPlay)
        .objectFit(ImageFit.Contain)
        .onTouch((event) => {
          if (event.type === TouchType.Down) {
            console.info(`${TAG} ${this._TAG} 视频被点击`)
            this.isShowOperation = !this.isShowOperation
            if (this.isShowOperation) {
              this.startTime()
            }
          }
        })
        .onStart(() => {
          console.info(`${TAG} ${this._TAG} 播放`)
          this.videoState = PLAYBACK_STATE.START
        })
        .onPause(() => {
          console.info(`${TAG} ${this._TAG} 暂停`)
          this.videoState = PLAYBACK_STATE.PAUSE
        })
        .onFinish(() => {
          console.info(`${TAG} ${this._TAG} 结束`)
          this.videoState = PLAYBACK_STATE.FINISH
        })
        .onError(() => {
          console.info(`${TAG} ${this._TAG} 播放失败`)
          this.videoState = PLAYBACK_STATE.ERROR
        })
        .onPrepared((callback) => {
          //  视频准备完成时触发该事件，通过duration可以获取视频时长，单位为秒(s)
          this.durationNumber = callback.duration
          this.durationCountStr = TimeUtils.FormatTime(this.durationNumber)
          //          console.info(`${TAG} onPrepared 视频时长 ${this.durationCountStr} 原始值:${this.durationNumber}`)
        })
        .onSeeking((callback) => {
          // 操作进度条过程时上报时间信息，单位为s。
          console.info(`${TAG} ${this._TAG} onSeeking ${callback.time}`)
        })
        .onUpdate((callback) => {
          // 播放进度变化时触发该事件，单位为s，更新时间间隔为250ms。
          if (this.lastTime > 0 && callback.time !== this.lastTime) {
            console.info(`${TAG} ${this._TAG} onUpdate vSetTime curTime lastTime ${this.lastTime} callback time:${callback.time}`)
            this.vSetTime(this.lastTime)
            this.curTime = this.lastTime
            this.lastTime = 0
          } else {
            this.curTime = callback.time
            console.info(`${TAG} ${this._TAG} onUpdate curTime ${this.curTime}`)
          }
          this.curTimeStr = TimeUtils.FormatTime(this.curTime)
          //          console.info(`${TAG} onUpdate 视频播放时间更新 ${this.curTimeStr} 原始值${callback.time}`)
          this.curSliderValue = TimeUtils.Rounding(this.curTime * 100 / this.durationNumber)
          //          console.info(`${TAG} onUpdate 更新滑块进度 ${this.curSliderValue}`)
        })
        .onFullscreenChange((callback) => {
          // 在全屏播放与非全屏播放状态之间切换时触发该事件，返回值为true表示进入全屏播放状态，为false则表示非全屏播放。
          console.info(`${TAG} ${this._TAG} onFullscreenChange ${callback.fullscreen}`)
        })
      if (this.isShowOperation) {
        // 居中操作按钮（播放/暂停）
        Column() {
          Image(this.videoState !== PLAYBACK_STATE.START ? $r('app.media.video_start_60') : $r('app.media.video_pause_60'))
            .width(60)
            .height(60)
            .objectFit(ImageFit.Cover)
            .onClick(() => {
              this.clickStartOrPause()
            })
        }
        .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.Center)
        .width('100%')
        .height('100%')
        // 视频操作栏
        Row({
          space: 10
        }) {
          // 播放/暂停按钮
          Image(this.videoState !== PLAYBACK_STATE.START ? $r('app.media.video_start') : $r('app.media.video_pause'))
            .width(26)
            .height(26)
            .objectFit(ImageFit.Cover)
            .onClick(() => {
              this.clickStartOrPause()
            })
          // 播放时间
          Text(this.curTimeStr)
            .fontSize(10)
            .fontColor(Color.White)
          // 进度条
          Slider({
            value: this.curSliderValue,
            min: 0,
            max: 100,
            style: SliderStyle.OutSet
          })
            .showSteps(false)
            .showTips(false)
            .blockColor(Color.White)
            .trackColor(Color.White)
            .selectedColor('#36AD08')
            .width('50%')
            .onChange((value: number, mode: SliderChangeMode) => {
              // SliderChangeMode Begin=0:开始 Moving=1 End=2 Click=3
              let timePercentage = value.toFixed(0)
              console.info(`${TAG} Slider onChange ${value} ${timePercentage}`)
              // 计算滑动滑块需要播放的时间
              this.curTime = parseInt(timePercentage) * this.durationNumber / 100
              this.vSetTime(this.curTime)
              this.curTimeStr = TimeUtils.FormatTime(this.curTime)
              console.info(`${TAG} ${this._TAG}  Slider onChange 滑块滑动时间变更 curTime:${this.curTime} curTimeStr ${this.curTimeStr}`)
            })
          // 总时长
          Text(this.durationCountStr)
            .fontSize(10)
            .fontColor(Color.White)
          Blank()
          // 播放倍数
          if (this.isFullScreen) {
            Select(this.selectSpeedOption)
              .selected(this.videoRateIndex)
              .value(this.videoRate.val)
              .font({ size: 10 })
              .fontColor(Color.White)
              .selectedOptionFont({ size: 10 })
              .selectedOptionFontColor('#F54F02')
              .optionFontColor('#5E5E5E')
              .optionFont({ size: 10 })
              .onSelect((index: number) => {
                console.info('Select:' + index)
                this.videoRate = PLAYBACK_SPEED[index]
                this.videoRateIndex = index
                console.info(`${TAG} videoRateIndex = ${this.videoRateIndex}`)
              })
              .border({
                width: 0,
                color: Color.White
              })
          }
          // 浮动层
          Image($r('app.media.icon_float'))
            .width(32)
            .height(32)
            .objectFit(ImageFit.Cover)
            .onClick(() => {
              console.info(`${TAG} 启动浮动层`)
            })
          // 全屏切换
          Image(this.isFullScreen ? $r('app.media.icon_small_screen') : $r('app.media.icon_full_screen'))
            .width(26)
            .height(26)
            .objectFit(ImageFit.Cover)
            .onClick(() => {
              console.info(`${TAG} 全屏切换`)
              this.onScreen(!this.isFullScreen)
            })
        }
        .width('100%')
        .height('60')
        .backgroundImage($r('app.media.bg_control_1'), ImageRepeat.X)
        .padding({
          left: 20,
          right: 20
        })
      }
    }.width(this.mWidth)
    .height(this.mHeight)
    .backgroundColor(Color.Gray)
  }
}

import { VideoData, User } from '../model/VideoData'
/**
 * 电影简介
 */
const TAG: string = 'VideoIntroduceView'
@Component
export struct VideoIntroduceView {
  @Link videoData: VideoData
  onClose: () => void
  @Prop @Watch('scrollClose') isScrollClose: boolean //  是否为滚动关闭
  private userList: Array<User> = []
  private scroller: Scroller = new Scroller()
  aboutToAppear() {
    console.info(`${TAG} aboutToAppear`)
    // 初始化演员数据
    if (this.videoData) {
      // 先添加导演
      for (const item of this.videoData.directs) {
        this.userList.push(item)
      }
      // 再添加演员
      for (const item of this.videoData.actors) {
        this.userList.push(item)
      }
    }
  }
  scrollClose() {
    if (this.isScrollClose) {
      this.scroller.scrollEdge(Edge.Top)
    }
  }
  aboutToDisappear() {
    this.userList = []
  }
  build() {
    Scroll(this.scroller) {
      Column() {
        Row() {
          // 简介标题
          Text($r('app.string.introduce'))
            .fontSize(22)
            .fontColor(Color.Black)
            .width('95%')
          Column() {
            Image($r('app.media.icon_close'))
              .width(22)
              .height(22)
              .objectFit(ImageFit.Cover)
          }.width(32)
          .height(32)
          .onClick(() => {
            console.info(`${TAG} CLOSE onClose`)
            this.scroller.scrollEdge(Edge.Top)
            this.onClose()
          })
        }.justifyContent(FlexAlign.Start)
        .width('100%')
        .margin({
          top: 10,
          bottom: 10
        })
        // 电影基础信息
        Row({ space: 20 }) {
          Image(this.videoData.image)
            .width(105)
            .height(135)
            .objectFit(ImageFit.Cover)
          Column({ space: 10 }) {
            Text(this.videoData.name)
              .fontSize(18)
              .fontColor('#2A1818')
              .align(Alignment.Start)
              .width('300')
            Row() {
              Text(this.videoData.describe)
                .fontSize(14)
                .fontColor(Color.White)
                .backgroundColor('#C4C4C4')
                .padding({
                  top: 5,
                  bottom: 5,
                  left: 10,
                  right: 10
                })
              Blank()
            }.width('300')
            Text(this.videoData.resourceType)
              .fontSize(18)
              .fontColor('#5E5E5E')
              .width(300)
            Row({ space: 5 }) {
              Image($r('app.media.icon_source'))
                .width(16)
                .height(16)
                .objectFit(ImageFit.Cover)
              Text(this.videoData.source)
                .fontSize(18)
                .fontColor('#5E5E5E')
                .width(200)
            }
            .width(300)
            .alignItems(VerticalAlign.Center)
            .justifyContent(FlexAlign.Start)
          }
          .justifyContent(FlexAlign.Start)
        }
        .width('100%')
        .height(135)
        .justifyContent(FlexAlign.Start)
        .margin({
          top: 10,
          bottom: 10
        })
        // 评分
        Row({ space: 20 }) {
          Column({ space: 0 }) {
            Text(this.videoData.grade)
              .fontSize(35)
              .fontColor('#F54F02')
            Text(this.videoData.gradeNumber + '人参与评分')
              .fontSize(12)
              .fontColor('#868686')
          }.width('120')
          Row({ space: 10 }) {
            Image($r('app.media.icon_fire'))
              .width(16)
              .height(16)
              .objectFit(ImageFit.Cover)
            Text($r('app.string.heat_value'))
              .fontSize(14)
              .fontColor('#F54F02')
            Progress({
              value: this.videoData.heat,
              type: ProgressType.Linear,
              total: 100
            })
              .width('40%')
              .color('#F54F02')
              .backgroundColor('#868686')
              .style({
                strokeWidth: 10
              })
          }
        }
        .width('100%')
        .justifyContent(FlexAlign.Start)
        .margin({
          top: 10,
          bottom: 10
        })
        // 演职员
        Text($r('app.string.cast'))
          .fontSize(18)
          .fontColor('#2A1818')
          .width('100%')
          .margin({
            top: 10,
            bottom: 10
          })
        // 演员列表
        Row() {
          List({
            space: 10,
            initialIndex: 0
          }) {
            ForEach(this.userList, (item: User) => {
              ListItem() {
                Column({ space: 10 }) {
                  Image(item.icon)
                    .width(105)
                    .height(135)
                    .objectFit(ImageFit.Cover)
                  Text(item.name)
                    .width(105)
                    .fontSize(14)
                    .fontColor('#2A1818')
                  Text(item.role)
                    .width(105)
                    .fontSize(12)
                    .fontColor('#868686')
                }
              }
            })
          }
          .scrollBar(BarState.Off)
          .listDirection(Axis.Horizontal)
          .cachedCount(3)
        }.width('100%')
        .justifyContent(FlexAlign.Start)
        .margin({
          top: 10,
          bottom: 10
        })
        // 剧情
        Text($r('app.string.story'))
          .fontSize(18)
          .fontColor('#2A1818')
          .width('100%')
          .margin({
            top: 10,
            bottom: 10
          })
        Text(this.videoData.introduction)
          .fontSize(12)
          .fontColor('#868686')
          .margin({
            top: 10,
            bottom: 10
          })
      }
      .padding({
        top: 20,
        bottom: 20,
        left: 40,
        right: 40
      })
      .justifyContent(FlexAlign.Start)
    }.width('100%')
    .scrollBar(BarState.Off)
    .backgroundColor(Color.White)
    .border({
      radius: 20
    })
  }
}

Panel（show：boolean）