HarmonyOS 6.0里用ArkTS+ArkUI做一个视频播放器
核心知识点
HarmonyOS 6.0的ArkUI提供了Video组件，这是官方封装好的视频播放“工具”，咱们只需要给它传视频地址、设置点样式，就能实现播放、暂停、进度条这些核心功能。
先明确几个关键概念：
视频源：可以是本地文件（比如手机里的视频）、网络视频（HTTP/HTTPS地址）；
控制器：Video组件自带播放控制栏（暂停、进度、音量），也能自定义；
ArkTS：就是咱们写逻辑的代码，比如点击按钮暂停、监听播放状态。
第一步：准备环境
确保你的DevEco Studio是最新版（支持HarmonyOS 6.0），新建一个Stage模型的ArkTS工程（新手选这个就对了）。
第二步：最简版视频播放器（5行核心代码）
先从最简单的开始，实现“能播放视频”这个核心需求。
代码示例
// 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的设计习惯。
运行效果
点击运行到模拟器/真机，就能看到一个视频区域，点击控制栏的播放按钮，视频就会开始播放啦！
第三步：进阶玩法（自定义控制+监听状态）
系统默认的控制栏不够个性？咱们自己加播放/暂停按钮，再监听视频播放状态（比如播放中、暂停、结束）。
完整代码
// 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')
}
}关键功能解释
1. 自定义控制按钮：隐藏系统控制栏（controls(false)），自己做播放/暂停/重新播放按钮；
2. 状态监听：
onPlay：视频开始播放时触发；
onPause：暂停时触发；
onEnded：播放结束时触发；
onUpdate：实时获取播放进度和总时长；
3. 控制器方法：
play()：播放；
pause()：暂停；
seek(0)：跳转到指定秒数（这里0就是重新播放）。
第四步：本地视频播放
如果想播放手机本地的视频，需要先配置权限，再写正确的路径：
1. 配置权限
在module.json5文件里添加文件访问权限：
{
"module": {
// 其他配置...
"requestPermissions": [
{
"name": "ohos.permission.READ_MEDIA_VIDEO" // 读取视频权限
},
{
"name": "ohos.permission.WRITE_MEDIA_VIDEO" // 写入视频权限（可选）
}
]
}
}2. 本地视频路径写法
应用沙箱内的视频（比如放在entry/src/main/resources/rawfile目录下）：
src: 'rawfile:///test.mp4' // rawfile目录下的test.mp4
手机相册/存储的视频（需要先获取文件路径）：
// 假设已经获取到本地文件路径
src: 'file:///storage/emulated/0/DCIM/Camera/test.mp4'
常见问题&避坑指南
1、网络视频播放失败：
检查网络是否正常；
确保视频地址是HTTP/HTTPS，且HarmonyOS 6.0允许非HTTPS（或配置网络安全策略）；
视频格式支持：MP4、MKV、AVI等主流格式都支持，优先用MP4。
2、本地视频找不到：
权限一定要配！运行时要手动授权；
路径别写错，rawfile目录下的文件不需要后缀以外的路径。
3、控制器没效果：
确保Video组件和控制器是同一个对象（比如示例中都是this.videoController）；
别重复创建控制器（比如在build里new VideoController()，会导致控制失效）。
总结
HarmonyOS 6.0的Video组件用起来超简单：
基础用法：给src和控制器，开控制栏就能播；
进阶用法：隐藏系统控制栏，自定义按钮+监听状态；
本地视频：配权限+写对路径。