鸿蒙video组件

​​​​​​​​​​​​​文档中心

文档中心

import { LengthUnit } from '@ohos.arkui.node'

@Entry
@Component
struct VideoControlCase {
  @State playSpeed: number = 2
  @State previewUri: Resource = $r('app.media.YuanShen2024')
  controller: VideoController = new VideoController()

  build() {
    Column({ space: 10 }) {
      Video({
        // src: 'https://video19.ifeng.com/video09/2024/05/23/p7199260608686989961-0-122707.mp4', 网络路径
        // src: 'file://' + getContext().filesDir + '/' + 'p7199260608686989961-0-122707.mp4', // 沙箱路径
        src: $rawfile('p7199260608686989961-0-122707.mp4'), // 本地路径，只能在resources/rawfile文件夹下
        // TODO 似乎直接配置（不用变量接收配置）影响播放？ 问题未找出，待测试。
        currentProgressRate: this.playSpeed, // 视频播放倍速，number/string 0.75 - 2.0， 每0.25为一单位
        // previewUri: this.previewUri, // 视频未播放时的预览图片路径，默认不显示图片。
        controller: this.controller
      })
        .height(400)
        .objectFit(ImageFit.Contain)
         .loop(true)// 循环播放
        .autoPlay(true)// 否自动播放
        .onStart(() => {
          // 播放时触发该事件。
        })
        .onPause(() => {
          //  暂停时触发该事件
        })
        .onStop(() => {
          // 播放停止时触发该事件(当stop()方法被调用后触发)。
        })
        .onPrepared((event) => {
          // onPrepared(callback:(event: { duration: number }) => void)
          // 视频加载准备完成时触发该事件。
          console.log('准备完成', event.duration) // 当前视频的时长，单位为秒。
        })

        .onSeeking((event) => {
          // onSeeking(callback:(event: { time: number }) => void)
          // 操作进度条过程时上报时间信息。
          // reset重置会触发，但stop停止不会
          console.log('操作进度条时', event.time) // 当前视频的时长，单位为秒。
        })

        .onUpdate((event) => {
          // onUpdate(callback:(event: { time: number }) => void)
          // 播放进度变化时触发该事件。
          console.log('播放时', event.time) // 当前视频的时长，单位为秒。
        })

        .onFullscreenChange((event) => {
          // onFullscreenChange(callback:(event: { fullscreen: boolean }) => void)
          // 在全屏播放与非全屏播放状态之间切换时触发该事件。
          console.log('是否全屏', event.fullscreen) // 为true表示进入全屏播放状态，为false则表示非全屏播放。
        })

        .onSeeked((event) => {
          // onSeeked(callback:(event: { time: number }) => void)
          // 操作进度条完成后，上报播放时间信息。
          console.log('操作进度条完成', event.time) // 当前视频的时长，单位为秒。
        })

        .onFinish(() => {
          // 播放结束时触发该事件
          console.log('播放结束')
        })
        .onError(() => {
          // 播放失败时触发该事件。
          console.log('播放失败')
        })


      Flex({
        wrap: FlexWrap.Wrap, space: {
          main: { value: 10, unit: LengthUnit.VP }, cross: { value: 10, unit: LengthUnit.VP }
        }
      }) {
        Button('播放').onClick(() => {
          this.controller.start()
        })

        Button('暂停').onClick(() => {
          // 暂停播放，显示当前帧，再次播放时【从当前位置】继续播放。
          this.controller.pause()
        })

        Button('停止').onClick(() => {
          // 停止播放，显示当前帧，再次播放时【从头开始】播放。
          this.controller.stop()
        })

        Button('重置').onClick(() => {
          // video组件重置AVPlayer。显示当前帧，再次播放时从头开始播放。
          this.controller.reset()
        })
        Button('全屏').onClick(() => {
          // 请求全屏播放
          this.controller.requestFullscreen(true)
          // setCurrentTime: 退出全屏
          // this.controller.requestFullscreen()
        })
        Button('全屏2').onClick(() => {
          // 请求全屏播放
          this.controller.requestFullscreen(false)
        })
        Button('跳转到10秒').onClick(() => {

          this.controller.setCurrentTime(10, SeekMode.Accurate)
        })

      }.width('100%')

    }
    .height('100%')
    .width('100%')
  }
}