一、前言

最近在学习 HarmonyOS ArkTS 媒体组件，Video是开发视频播放功能的核心组件，本文完整实现本地 rawfile 视频播放、网络视频播放、自定义播放 / 暂停按钮、循环静音、圆角预览等全套功能，适配 ArkTS 标准语法，新手可直接复制运行。

环境说明

• 开发工具：DevEco Studio 6.1.2
• 编译版本：Pura 90 6.1.0
• 资源目录：resources/rawfile（存放本地 mp4 视频）

二、整体效果预览

1. 顶部标题：本地视频播放器
2. 视频播放窗口：200 高度圆角视频，自带封面预览图，默认静音、循环、不自动播放
3. 下方两个自定义按钮：播放、暂停，独立控制视频控制器
4. 支持两种视频源切换：本地 rawfile 视频 / 在线网络 mp4

三、完整可运行代码 Index.ets

四、分步功能拆解讲解

1. 资源准备（本地视频播放关键）

本地视频必须放在项目资源目录：entry/src/main/resources/rawfile/

• 视频文件：111.mp4 放入 rawfile 文件夹
• 封面图片：图片放入 resources/base/media/，命名 background，通过$r('app.media.background')引用

两种视频 src 区别

表格

资源类型	写法	适用场景
本地 raw 视频	$rawfile('111.mp4')	打包内置短视频
网络在线视频	网络 url 字符串	在线视频、远程资源

2. VideoController 视频控制器（核心 API）

控制器是实现自定义按钮的关键，实例化后调用内置方法控制视频：

1. controller.start()：开始播放
2. controller.pause()：暂停播放
3. 拓展 API（可自行添加按钮）
   • controller.stop()：停止视频，回到开头
   • controller.setCurrentTime(5)：跳转到第 5 秒

3. Video 组件常用属性详解

ets

.height(200)        // 限定视频高度，宽度自适应
.muted(true)        // 静音，部分设备不静音会无法自动播放
.loop(true)         // 循环播放
.autoPlay(false)    // 页面加载不自动播放，优化体验
.controls(true)     // true显示系统进度条/播放按钮；false隐藏原生控件
.borderRadius(15)   // 视频圆角美化
.previewUri(图片资源) // 视频加载完成前显示封面图

4. 自定义播放按钮布局

使用Stack堆叠布局摆放两个圆形按钮，分别绑定点击事件：

• 绿色圆形按钮：执行start()播放
• 蓝色圆形按钮：执行pause()暂停 通过margin控制两个按钮横向并排，实现自定义控制面板，脱离原生控件。

五、常见踩坑解决

问题 1：本地视频不显示 / 报错

• 检查视频路径：必须放在rawfile文件夹，文件名纯英文、无空格中文
• 资源引用写法：$rawfile("xxx.mp4") 不能写错

问题 2：网络视频无法播放

1. 网络权限：module.json5开启网络访问权限

json

"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
]

1. 模拟器 / 真机需要联网，部分 http 地址需要开启明文网络访问

问题 3：点击按钮无反应

确认Video组件绑定了controller: this.controller，控制器实例化不能遗漏

ets

private controller: VideoController = new VideoController()

问题 4：视频有声音但不想外放

设置.muted(true)静音属性，适配短视频、预览类场景

六、拓展优化方向（可自行拓展）

1. 增加停止按钮：调用this.controller.stop()
2. 进度拖拽、倍速播放：结合 VideoController 进阶 API
3. 全屏播放、横竖屏切换
4. 视频列表循环播放，多视频切换 src
5. 隐藏原生 controls，完全自定义进度条

七、总结

本文完整覆盖鸿蒙 ArkTS Video 组件基础使用，区分本地 / 网络两种视频资源，讲解控制器控制逻辑，搭配自定义按钮实现简易播放器，适合新手入门媒体开发，代码可直接复制到 DevEco Studio 运行调试。