【鸿蒙开发】视频播放

1. Video 视频组件

用于播放视频文件并控制其播放状态的组件。

接口：

Video(value: {src?: string | Resource, currentProgressRate?: number | string | PlaybackSpeed, previewUri?: string | PixelMap | Resource, controller?: VideoController})

参数：

属性：

除支持通用属性外，还支持以下属性：

事件：

除支持通用事件外，还支持以下事件：

示例

@Entry
@Component
struct VideoIndex {
  // 本地视频
  @State videoSrc: Resource = $rawfile('we are.mp4')
  // 在线视频
  @State videoSrc2: string = "https://alist.webdq.top/p/store/mp4/we%20are.mp4?sign=_tS2RcvZPYe8BqloYtulXBAwcwaJupOfz439FUOFcQ4=:0"
  // 本地音频
  @State audioSrc: Resource = $rawfile('we are.mp3')

  build() {
    Row() {
      Tabs() {
        TabContent() {
          Video({
            src: this.videoSrc
          })
            .width('100%')
            .aspectRatio(1.4)
        }
        .tabBar("本地视频")

        TabContent() {
          Column() {
            Video({
              src: this.videoSrc2
            })
              .width('100%')
              .aspectRatio(1.4)
          }
          .width('100%')
        }.tabBar("在线视频")

        TabContent() {
          Video({
            src: this.audioSrc
          })
            .width('100%')
            .aspectRatio(1.4)
        }
        .tabBar("音频")
      }
      .animationDuration(300)

    }
    .height('100%')
  }
}

2. VideoController 控制器

一个VideoController对象可以控制一个或多个video，可用视频播放实例请参考media.createAVPlayer。

start

start(): void

开始播放。

pause

pause(): void

暂停播放，显示当前帧，再次播放时从当前位置继续播放。

stop

stop(): void

停止播放，显示当前帧，再次播放时从头开始播放。

setCurrentTime

setCurrentTime(value: number)

指定视频播放的进度位置。

参数：

requestFullscreen

requestFullscreen(value: boolean)

请求全屏播放。

参数：

exitFullscreen

exitFullscreen()

退出全屏播放。

setCurrentTime8+

setCurrentTime(value: number, seekMode: SeekMode)

指定视频播放的进度位置，并指定跳转模式。

参数：

SeekMode8+枚举说明

3. 自定义控制器

使用 new VideoController 创建一个控制器实例

把 VideoController 实例传给 Video 组件

@Entry
@Component
struct Index {
  controller: VideoController = new VideoController()
  @State speed: number = 1

  build() {
    Column() {
      Video({
        src: $rawfile("we are.mp4"),
        currentProgressRate: this.speed,
        controller: this.controller
      })
        .width("100%")
        .aspectRatio(1)

      Row() {
        Text(`播放速度：${this.speed}`)
      }

      Slider({
        value: this.speed,
        min: 0.75,
        max: 2,
        step: 0.25,
        style: SliderStyle.InSet
      })
        .showSteps(true)
        .onChange((value) => {
          this.speed = value
        })

      Row() {
        Button("开始").onClick(() => {
          this.controller.start()
        })
        Button("暂停").onClick(() => {
          this.controller.pause()
        })
        Button("跳转到第30秒").onClick(() => {
          this.controller.setCurrentTime(30, SeekMode.Accurate) //单位秒
        })
        Button("结束").onClick(() => {
          this.controller.stop()
        })
      }

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