一、前言

在各类应用开发中，视频播放是高频业务场景，例如产品宣传页、线上课程、短视频内容展示等。鸿蒙 ArkUI 提供了开箱即用的Video原生视频组件，依托VideoController控制器可以灵活控制视频播放行为；结合@State实现数据驱动 UI 自动刷新，搭配Toggle开关监听用户交互操作，就能打造可视化的视频控制面板

二、核心知识点前置介绍

1. @State 状态装饰器

@State是 ArkUI 最基础的组件内响应式装饰器：

• 被@State修饰的变量发生修改时，页面绑定该变量的 UI 组件会自动重新渲染，无需手动刷新视图；
• 变量作用域仅在当前自定义组件内，适合存储播放状态、开关选中状态等临时交互数据；
• 是实现开关 UI 与视频播放逻辑双向联动的核心基础。

2. Video 视频组件

鸿蒙官方封装的多媒体播放组件，支持两类资源播放：

1. 本地资源：$rawfile('视频文件名')，需要将视频放置在entry/src/main/resources/rawfile目录下；
2. 网络资源：传入合法的 HTTP/HTTPS 视频地址，需要在module.json5中声明网络权限。

3. 属性	作用
   src	绑定视频播放资源地址
   previewUri	设置视频封面预览图，视频未播放时展示
   controller	视频控制器，调用播放、暂停、静音等方法
   autoPlay	是否打开页面后自动播放视频
   loop	是否开启循环播放
   muted	是否默认静音播放
   controls	是否显示系统自带播放控制条

   3. Toggle 开关 + onChange 事件Toggle是原生切换组件，包含开关、复选框、按钮三种展示样式；通过onChange回调监听用户点击 / 滑动操作，实时获取开关最新状态，用来触发视频播放、静音等业务逻辑。

四、项目前置配置

4.1 资源文件存放说明

1. 视频文件：将bb.mp4放到路径 entry/src/main/resources/rawfile/ 文件夹下；
2. 封面图片：将背景图放到路径 entry/src/main/resources/base/media/ 文件夹下，命名对应资源名。

4.2 module.json5 权限配置

配置说明：

1. requestPermissions中声明了ohos.permission.INTERNET网络权限，为后续网络视频播放做准备；
2. 默认启动组件为EntryAbility，配置了桌面入口技能，应用可以在手机桌面正常打开；
3. 页面路由从main_pages配置文件读取，所有页面必须在该文件注册才能正常预览运行。

五、基础版：本地视频播放实现代码

六、文章总结

1. @State是 ArkUI 响应式开发的核心，实现数据驱动 UI 自动刷新，是开关、表单等交互功能的基础；
2. Video组件结合VideoController可以快速实现本地、网络视频播放，通过丰富属性配置循环、静音、封面等业务需求；
3. Toggle搭配onChange事件可以实现友好的可视化交互，完成视频播放状态的灵活控制；