鸿蒙arkts的video组件简单使用示例

大家好我是海岛，分享一下在传智博学谷学习的一些知识技术。

分享下arkts中的video组件的简单使用方法

arkUI提供了Video组件可以直接播放视频，并提供自带的播放-暂停 全屏，拖动进度等功能

用法

Video提供构造参数 Video({ src: string | Resource })，其中src支持在线路径-和本地资源路径

开发时只能用模拟器看，预览器是看不了的

下面是一段简单的示例代码

@Entry
@Component
struct Video1 {
  @State message: string = 'Hello World'

  build() {
    Tabs() {
      TabContent() {
        Video({
          src: "https://vd4.bdstatic.com/mda-phegibuu9ba9nrpe/hd/cae_h264/1692171953345322752/mda-phegibuu9ba9nrpe.mp4?auth_key=1703502162-0-0-6fd1550e28060e61121ed6d2a773b68c&bcevod_channel=searchbox_feed&pd=1&cr=1&cd=0&pt=4&logid=0162714477&vid=1316841417577475878&abtest=all"
        }).width("90%").aspectRatio(1.3)
      }.tabBar("网络视频")
      TabContent() {
        Video({
            src:$rawfile("朋友圈背景机车.mp4")
        }).width("90%").aspectRatio(1.3)
      }.tabBar("本地视频")
    }.animationDuration(500)
  }
}

我们可以通过构造函数传入currentProgressRate 控制倍速，它来自PlaybackSpeed的枚举，目前支持

0.75-1-1.25-1.75-2倍速设置， 同时我们可以通过传入VideoController来获取视频播放的控制权

如果想通过外部按钮来控制播放器的状态，并且隐藏播放器底部自带进度条等配置，可以看下面这段示例代码

完整代码如下

@Entry
@Component
struct VideoCase {
  @State
  speed: number = 1
  controller: VideoController = new VideoController()
  build() {
    Row() {
      Tabs() {
        TabContent() {
          Column({ space: 20 }) {
            Video({
              controller: this.controller,
              currentProgressRate: this.speed,
              src: 'https://vd3.bdstatic.com/mda-pmj5ajqd7p4b6pgb/576p/h264/1703044058699262355/mda-pmj5ajqd7p4b6pgb.mp4?auth_key=1703138418-0-0-618ea72b33be241c96c6cff86c06e080&bcevod_channel=searchbox_feed&cr=1&cd=0&pd=1&pt=4&logid=0018430194&vid=9762003448174112444&abtest=all'
            })
              .width('100%')
              .aspectRatio(1.4)
            Slider({
              value: this.speed,
              min: 0.75,
              step: 0.25,
              max: 2,
              style: SliderStyle.InSet
            })
              .showSteps(true)
              .onChange(value => {
                this.speed = value
              })
            Text(this.speed+"倍速").fontSize(14).textAlign(TextAlign.Center).width('100%')
            Row({ space: 20 }) {
              Button("播放")
                .onClick(() => {
                  this.controller.start()
                })
              Button("暂停")
                .onClick(() => {
                  this.controller.pause()
                })
              Button("移动进度")
                .onClick(() => {
                  this.controller.setCurrentTime(30) // 这里的单位为秒
                })
              Button("结束")
                .onClick(() => {
                  this.controller.stop()
                })
            }
          }
          .width('100%')
        }.tabBar("在线视频")
        TabContent() {
          Video({
            src: $rawfile('travel.mp4')
          })
            .width('100%')
            .aspectRatio(1.4)
        }
        .tabBar("本地视频")
        TabContent(){
          Video({
            src: 'https://m701.music.126.net/20231221132430/02dcbfb2c719c30dbfc644dcc82e8bf2/jdyyaac/obj/w5rDlsOJwrLDjj7CmsOj/31912317338/8cf5/3009/5531/0dbdd12cef8ea1c3f1d00a23bb26becb.m4a'
          }).width('100%')
            .aspectRatio(1.4)

        }.tabBar("音频")
      }
      .animationDuration(300)

    }
    .height('100%')
  }
}