鸿蒙 ArkTS Video 视频组件完整实战教程（本地 + 网络视频、自定义播放按钮）

一、前言

HarmonyOS ArkTS 原生 Video 视频组件可同时支持本地 rawfile 视频、在线网络视频，配合 VideoController 控制器实现播放控制。系统自带播放控件样式固定，本篇完整实现封面预览、循环静音、自定义播放暂停按钮，附带图文分步讲解。

二、项目资源准备说明

1. 本地视频存放目录

把 mp4 视频文件放入项目路径entry/src/main/resources/rawfile/，示例文件命名111.mp4。

2. 视频封面图片

封面素材放置resources/base/media/，图片命名background，代码内通过$r('app.media.background')引用。

三、完整页面代码截图说明（截图插入位置标注）

3.1 顶部变量定义与 Video 组件代码截图

1. 顶部私有变量区域：分别定义本地视频资源、网络视频地址、封面图、视频控制器四个核心变量；
2. Column 布局内 Video 核心组件配置，包含 src 视频源、previewUri 封面、controller 控制器三大必填参数；
3. 链式修饰属性：设置视频高度、静音、循环、禁止自动播放、关闭原生控制器、圆角样式；
4. 关键要点：controls(false)必须关闭系统自带播放条，才能使用自定义按钮。

3.2 自定义按钮 Stack 布局完整代码截图

1. Stack 层叠容器用来承载自定义按钮，设置宽高铺满父容器；
2. 两个圆形按钮：播放按钮、暂停按钮，分别设置圆角、尺寸、背景色；
3. 按钮绑定点击事件，调用控制器start()/pause()控制视频播放状态。

四、真机 / 模拟器预览效果截图说明

4.1 最终运行效果图

在两张代码截图下方补充说明：右侧手机预览窗口即为页面最终展示效果，页面标题「本地视频播放器」，上方带圆角视频窗口，底部两个蓝色圆形自定义播放、暂停按钮，视频未播放时自动显示封面图。

五、关键配置图文说明

5.1 网络视频权限配置（补充文字说明，无截图可省略）

播放在线网络视频，需要在module.json5文件中添加网络权限ohos.permission.INTERNET，否则无法加载网络视频资源。

六、功能拓展图文思路

1. 新增停止按钮：在 Stack 布局内追加按钮，调用controller.stop()；
2. 进度跳转：新增滑块组件，通过controller.seek(秒数)跳转播放进度；
3. 播放完成监听：在 Video 组件后链式绑定onFinish回调，可做循环提示、自动重播逻辑。

截图插入位置汇总（清晰标注，直接复制进博客）

1. 章节「3.1 顶部变量定义与 Video 组件代码截图」下方：插入第一张代码截图（Index.ets 上半段代码那张）
2. 章节「3.2 自定义按钮 Stack 布局完整代码截图」下方：插入第二张代码截图（Index.ets Stack 按钮下半段代码那张）
3. 两张截图旁同步描述截图右侧手机预览窗口的运行效果，不用额外单独插效果图，直接依托截图自带的模拟器预览区域讲解即可。