前言

在鸿蒙（HarmonyOS）ArkUI 开发中，Video 视频组件是最常用的媒体组件，用于实现本地视频、网络视频播放、视频控制、循环播放等功能。

很多新手会遇到：视频加载失败、文件类型不支持、代码报错、按钮间距报错、无法播放等问题。本文从零拆解 Video 组件用法、核心属性、常见坑点，附带可直接运行完整代码，适合学习、作业、博客收录。

一、Video 组件是什么？

Video 是 ArkUI 提供的原生视频播放组件，专门用于播放视频资源，支持两种视频来源：

1. 网络视频：传入合法 MP4 网络 URL 地址

2. 本地视频：读取项目 rawfile 目录下的本地 MP4 文件

优势：轻量化、无需第三方插件、自带播放控制、支持循环、静音、适配缩放。

二、Video 核心构成（必懂）

1. 视频控制器 VideoController

Video 必须绑定控制器，才能实现播放、暂停逻辑。

定义代码：

private controller: VideoController = new VideoController();

常用方法：

• this.controller.start()：播放视频

• this.controller.pause()：暂停视频

2. src 视频资源路径

src 是 Video 唯一必填参数，用来指定视频来源。

两种写法：

 网络视频（string 字符串）：

src: "https://xxx/xxx.mp4"

本地视频（Resource 资源类型：

src: $r("rawfile", "bb.mp4")

三、Video 常用属性详解（作业/面试高频）

属性通俗解释：

• 关闭自动播放：避免进入页面直接播放

• 开启循环：视频播放完毕自动重播

• 无边框：符合移动端简洁 UI 风格

• 隐藏默认控制条：自定义播放/暂停按钮

四、底部按钮布局讲解（Row + 间距实现）

低版本鸿蒙 API 不支持 Row 的 gap 属性，会直接爆红报错。

正确通用方案：使用 Blank 空白组件实现 30vp 间距，全版本兼容、零报错。

• Row：横向排列两个按钮

• Blank(30)：两个按钮中间空出 30vp 间距

• justifyContent 居中对齐

五、完整可运行示范代码（零报错、学生作业标准）

特性：无边框、自定义播放暂停、居中布局、适配所有低版本、无语法报错、可直接发表作业/博客。

网络视频报错解决：当前不支持该文件类型:

报错原因：

• 协议为 http 不安全协议，鸿蒙模拟器/真机拦截

• 服务器跨域、资源失效，提示「不支持该文件类型」

解决方案二选一：

1. 替换为 https 安全可播放视频链接

2. 改用本地 rawfile 视频（最稳定、零报错）

七、学习总结（博客结尾）

1. ArkTS Video 视频组件核心由 VideoController + src 资源 组成；

2. 低版本项目禁止使用 gap，使用 Blank 实现按钮间距，彻底杜绝报错；

3. 本地视频播放最稳定，网络视频容易出现协议、跨域、格式不支持问题；

4. 通过自定义按钮可以实现高度自定义的视频播放页面，满足课程作业与开发需求。