HarmonyOS 6.0 视频播放组件使用教程

今天咱们用最接地气的方式，手把手教你在HarmonyOS 6.0里用ArkTS+ArkUI做一个视频播放器------不用复杂概念，看完就能上手！

核心知识点先唠唠

HarmonyOS 6.0的ArkUI提供了Video组件，这是官方封装好的视频播放"工具"，咱们只需要给它传视频地址、设置点样式，就能实现播放、暂停、进度条这些核心功能。

先明确几个关键概念：

视频源：可以是本地文件（比如手机里的视频）、网络视频（HTTP/HTTPS地址）；
控制器：Video组件自带播放控制栏（暂停、进度、音量），也能自定义；
ArkTS：就是咱们写逻辑的代码，比如点击按钮暂停、监听播放状态。

第一步：准备环境

确保你的DevEco Studio是最新版（支持HarmonyOS 6.0），新建一个Stage模型的ArkTS工程（新手选这个就对了）。

第二步：最简版视频播放器（5行核心代码）

先从最简单的开始，实现"能播放视频"这个核心需求。

代码示例

typescript 复制代码

// index.ets
@Entry
@Component
struct VideoPlayerPage {
  build() {
    Column() {
      // 核心：Video组件
      Video({
        src: 'https://www.w3school.com.cn/i/movie.mp4', // 网络测试视频地址
        controller: new VideoController() // 控制器，用来控制播放/暂停等
      })
      .width('100%') // 宽度占满屏幕
      .height(300) // 高度设为300vp
      .controls(true) // 显示系统默认控制栏
      .autoPlay(false) // 不自动播放（避免用户反感）
    }
    .padding(20)
    .width('100%')
    .height('100%')
    .backgroundColor('#f5f5f5')
  }
}

代码解释

src：视频地址，这里用了一个公开的测试地址，你也可以换成自己的本地视频路径（比如dataability:///com.example.myapplication/files/video.mp4）；
VideoController()：控制器对象，后续用来手动控制播放/暂停；
controls(true)：显示系统自带的控制栏（包含播放、暂停、进度条、音量、全屏）；
autoPlay(false)：默认不自动播放，符合大多数App的设计习惯。

运行效果

点击运行到模拟器/真机，就能看到一个视频区域，点击控制栏的播放按钮，视频就会开始播放啦！

第三步：进阶玩法（自定义控制+监听状态）

系统默认的控制栏不够个性？咱们自己加播放/暂停按钮，再监听视频播放状态（比如播放中、暂停、结束）。

完整代码

typescript 复制代码

// index.ets
@Entry
@Component
struct CustomVideoPlayer {
  // 1. 定义控制器和状态变量
  private videoController: VideoController = new VideoController()
  @State isPlaying: boolean = false // 是否正在播放
  @State currentTime: number = 0 // 当前播放进度（秒）
  @State duration: number = 0 // 视频总时长（秒）

  build() {
    Column() {
      // 视频播放区域
      Video({
        src: 'https://www.w3school.com.cn/i/movie.mp4',
        controller: this.videoController
      })
      .width('100%')
      .height(300)
      .controls(false) // 隐藏系统控制栏，自定义
      .autoPlay(false)
      // 2. 监听视频状态变化
      .onPlay(() => {
        this.isPlaying = true
        console.log('视频开始播放啦')
      })
      .onPause(() => {
        this.isPlaying = false
        console.log('视频暂停了')
      })
      .onEnded(() => {
        this.isPlaying = false
        this.currentTime = 0
        console.log('视频播放结束了')
      })
      .onUpdate((e) => {
        // 实时更新播放进度
        this.currentTime = e.time
        this.duration = e.duration
      })

      // 自定义控制区域
      Row() {
        // 播放/暂停按钮
        Button(this.isPlaying ? '暂停' : '播放')
          .onClick(() => {
            if (this.isPlaying) {
              this.videoController.pause() // 暂停
            } else {
              this.videoController.play() // 播放
            }
          })
          .margin(10)

        // 播放进度显示
        Text(`${Math.floor(this.currentTime)}/${Math.floor(this.duration)}秒`)
          .fontSize(14)

        // 重新播放按钮
        Button('重新播放')
          .onClick(() => {
            this.videoController.seek(0) // 跳转到0秒
            this.videoController.play() // 播放
          })
          .margin(10)
      }
      .justifyContent(FlexAlign.Center)
      .marginTop(20)
    }
    .padding(20)
    .width('100%')
    .height('100%')
    .backgroundColor('#f5f5f5')
  }
}

关键功能解释

自定义控制按钮 ：隐藏系统控制栏（controls(false)），自己做播放/暂停/重新播放按钮；
状态监听 ：
- onPlay：视频开始播放时触发；
- onPause：暂停时触发；
- onEnded：播放结束时触发；
- onUpdate：实时获取播放进度和总时长；
控制器方法 ：
- play()：播放；
- pause()：暂停；
- seek(0)：跳转到指定秒数（这里0就是重新播放）。

第四步：本地视频播放（重要！）

如果想播放手机本地的视频，需要先配置权限，再写正确的路径：

1. 配置权限

在module.json5文件里添加文件访问权限：

json 复制代码

{
  "module": {
    // 其他配置...
    "requestPermissions": [
      {
        "name": "ohos.permission.READ_MEDIA_VIDEO" // 读取视频权限
      },
      {
        "name": "ohos.permission.WRITE_MEDIA_VIDEO" // 写入视频权限（可选）
      }
    ]
  }
}

2. 本地视频路径写法

应用沙箱内的视频 （比如放在entry/src/main/resources/rawfile目录下）：
typescript 复制代码
```
src: 'rawfile:///test.mp4' // rawfile目录下的test.mp4
```

手机相册/存储的视频 （需要先获取文件路径）：

typescript 复制代码

// 假设已经获取到本地文件路径
src: 'file:///storage/emulated/0/DCIM/Camera/test.mp4'

常见问题&避坑指南

网络视频播放失败：
- 检查网络是否正常；
- 确保视频地址是HTTP/HTTPS，且HarmonyOS 6.0允许非HTTPS（或配置网络安全策略）；
- 视频格式支持：MP4、MKV、AVI等主流格式都支持，优先用MP4。
本地视频找不到：
- 权限一定要配！运行时要手动授权；
- 路径别写错，rawfile目录下的文件不需要后缀以外的路径。
控制器没效果：
- 确保Video组件和控制器是同一个对象（比如示例中都是this.videoController）；
- 别重复创建控制器（比如在build里new VideoController()，会导致控制失效）。

总结

HarmonyOS 6.0的Video组件用起来超简单：

基础用法：给src和控制器，开控制栏就能播；
进阶用法：隐藏系统控制栏，自定义按钮+监听状态；
本地视频：配权限+写对路径。

如果大家想考取鸿蒙开发者认证的，欢迎加入我的专属考试链接中：https://developer.huawei.com/consumer/cn/training/classDetail/6ce9d5a998724a849ec634f318107d37?type=1?ha_source=hmosclass\&ha_sourceId=89000248

新手先从最简版开始，跑通后再加自定义控制，一步步来，很快就能掌握啦！如果想加全屏、倍速这些功能，评论区说，咱们再补~