前言

在 HarmonyOS ArkUI 开发中，视频播放是高频需求，ArkUI 提供了原生Video组件，无需引入第三方播放器，即可实现本地本地资源视频、网络在线视频播放，同时支持封面预览、自动播放、循环静音、控制器手动启停等功能。 本文结合课堂三段实训代码，完整拆解本地 rawfile 视频播放、网络在线视频播放两套方案，同时整理开发踩坑解决方案、权限配置、常用属性详解。

Video 组件基础语法

构造参数说明

Video({
  src: 资源地址,
  controller: 视频控制器,
  previewUri: 封面图(仅本地视频可用)
})

1. src：视频源，分两种类型：

•   本地 rawfile 视频：$rawfile("xxx.mp4")，类型为Resource
•   网络在线视频：完整 http 链接字符串，类型为string

1. controller: VideoController：控制器对象，可代码调用播放 / 暂停 / 跳转
2. previewUri：视频加载前展示的封面图片，仅本地视频支持，图片存放于media目录

案例 1：本地视频播放

播放器铺满页面宽度，带原生底部控制条，可手动点击播放、拖动进度。

完整代码

@Entry
@Component
struct Index{
  private videoSrc:Resource=$rawfile('1.mp4')
  build() {
    Column(){
      Video({
        src:this.videoSrc
      })
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

效果

本地视频资源规范

本地视频文件必须放入路径：entry/src/main/resources/rawfile/，无文件夹则手动新建，视频不能嵌套子目录存放。

本地视频常见报错解决

1. 视频时长显示 00:00，无法播放 鸿蒙播放器仅兼容 H.264 视频编码 + AAC 音频编码，需使用 ffmpeg 转码：

   ffmpeg.exe -i 原视频.mp4 -c:v libx264 -c:a aac output.mp4

2. 转码后将 output.mp4 放入 rawfile 目录。
3. 编译提示资源读取失败 右键视频文件 → 属性 → 勾选「只读」，同步工程后重新构建。

案例 2：本地视频 + 网络视频同屏展示

实现页面上下分栏，上方播放本地 rawfile 视频，下方播放在线网络视频，两套视频互不干扰。

完整代码

@Entry
@Component
struct Index{
  private videoSrc:Resource=$rawfile('1.mp4')
  private videoStr:string='http://www.w3school.com.cn/example/html5/mov_bbb.mp4';
  build() {
    Column(){
      Video({
        src:this.videoSrc
      }).height('50%')

      Video({
        src:this.videoStr
      }).height('50%')
    }
    .width('100%')
    .height('100%')
  }
}

效果

网络视频关键前置：配置网络权限

播放网络视频必须在entry/module.json5中添加互联网权限，否则视频空白加载失败：

"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
]

注意：网络链接仅支持标准 http/https MP4 格式，不支持加密流媒体。

案例 3：带封面、手动按钮控制的本地视频（综合实战）

完整实现标题、视频封面、静音循环、点击按钮手动播放的成品页面。

完整代码

@Entry
@Component
struct Index{
  private videoSrc:Resource=$rawfile('1.mp4')
  private pict:Resource=$r('app.media.7')
  private controller:VideoController=new VideoController()
  build() {
    Column({space:50}){
      Text('鸿蒙应用开发视频资源')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)

      Video({
        src:this.videoSrc,
        previewUri:this.pict,
        controller:this.controller
      })
        .height('45%')
        .width('90%')
        .muted(true)
        .loop(true)
        .autoPlay(false)
        .controls(true)

      Button('开始学习')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .backgroundColor(Color.Pink)
        .borderRadius(18)
        .height(50)
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

效果

问题 ：封面图不显示

封面图片必须放在resources/base/media文件夹，使用$r('app.media.图片名')读取，不能使用 rawfile 存放图片。

开发避坑总结

本地视频必须转码为 H.264+AAC 编码，否则时长识别异常； rawfile 只放视频，封面图片统一放在media文件夹； 网络播放务必在 module.json5 添加互联网权限； 多视频页面每个 Video 单独实例化 VideoController，避免控制错乱； 组件名不要使用index等系统保留关键字，否则编译直接报错。