一、核心知识点预习（本篇全部用到）

• 布局组件：Column垂直布局、Row水平布局

• 基础组件：Text文本、Button按钮、Video视频组件

• 资源引用：$rawfile（本地视频）、$r（本地图片封面）

• 视频控制器：VideoController 实现播放、暂停

• 组件属性：尺寸、边距、居中、循环、静音、自动播放、填充模式

• 点击事件：onClick 按钮交互逻辑

二、最终完整可运行代码

import { VideoController } from '@ohos.multimedia.video';

@Entry
@Component
struct Index {
  // 1. 创建视频控制器（视频遥控器）
  private videoCtrl: VideoController = new VideoController();

  build() {
    // 外层垂直布局：整体页面结构
    Column() {
      // 标题文本
      Text("本地视频播放器")
        .fontSize(24)
        .width('100%')
        .textAlign(TextAlign.Center)
        .margin({ bottom: 20 })

      // 核心视频组件
      Video({
        src: $rawfile('屏幕录制 2026-06-05 164425.mp4'),
        controller: this.videoCtrl,
        previewUri: $r('app.media.a1')
      })
        .width('100%')
        .height(220)
        .controls(false)        // 隐藏系统自带播放条
        .autoPlay(false)       // 关闭自动播放
        .loop(true)            // 开启循环播放
        .muted(false)          // 不静音
        .objectFit(ImageFit.Contain) // 等比例显示不变形
        .margin({ bottom: 30 })

      // 播放、暂停按钮区域
      Row({ space: 30 }) {
        Button("播放")
          .onClick(() => {
            this.videoCtrl.start()
          })
          .height('30%')

        Button("暂停")
          .onClick(() => {
            this.videoCtrl.pause()
          })
          .height('30%')
      }
      .width('100%')
      .justifyContent(FlexAlign.Center)

    }
    .padding(15)
    .width('100%')
    .height('90%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

以下是我实战编写的完整版本地视频播放器代码，可直接复制运行：

三、逐行核心知识点精讲（自用复习版）

1. 控制器核心原理（重点必记）

private videoCtrl: VideoController = new VideoController();

这句话的作用：创建视频遥控器。

单独写控制器没用，必须绑定给Video组件：

controller: this.videoCtrl

通俗理解：

• videoCtrl = 遥控器

• controller: this.videoCtrl = 遥控器对准电视（绑定视频）

• this.videoCtrl.start() / pause() = 按遥控器按键

不绑定控制器，按钮点击完全无效。

2. Video三大基础参数

• src：视频资源地址，本地视频用 $rawfile('视频名.mp4')

• previewUri：视频未播放时的封面图片，用 $r('app.media.图片名')

• controller：绑定视频控制器，实现自定义播放暂停

3. Video常用属性（全部掌握）

• controls(false)：隐藏系统默认进度条、播放按钮（自定义按钮必备）

• autoPlay(false)：进入页面不自动播放视频

• loop(true)：视频播放完毕自动循环

• muted(false)：开启视频声音

• objectFit(ImageFit.Contain)：视频等比例显示，不拉伸、不变形

4. 布局结构逻辑

• 外层 Column：垂直排列「标题 + 视频 + 按钮」

• 内层 Row：水平排列「播放、暂停双按钮」

• 通过 margin、padding、居中属性，让页面布局整洁规范

四、资源存放规范（必考易错点）

1. 视频文件（.mp4）存放路径：

entry/src/main/resources/rawfile/

2. 封面图片存放路径：

entry/src/main/resources/base/media/

⚠️ 文件名尽量不用中文和空格，避免加载失败。

五、常见报错与解决（实战踩坑总结）

• 控制器爆红：忘记顶部导入 VideoController

• 按钮点击没反应：没写 controller: this.videoCtrl 绑定视频

• 视频空白：资源路径写错、文件没放对文件夹

• 视频拉伸变形：缺少 objectFit 适配属性

六、学习总结

本次实战彻底掌握了鸿蒙Video组件核心用法：从资源引用、控制器绑定、视频属性配置、布局排版、交互逻辑完整闭环。不再依赖系统默认播放控件，可以手动控制视频播放暂停、循环播放，实现了极简、干净的自定义本地视频播放器。