一、前言

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. 两张截图旁同步描述截图右侧手机预览窗口的运行效果，不用额外单独插效果图，直接依托截图自带的模拟器预览区域讲解即可。