鸿蒙 ArkTS Video 视频组件完整实战教程(本地 + 网络视频、自定义播放按钮)
一、前言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 组件代码截图顶部私有变量区域分别定义本地视频资源、网络视频地址、封面图、视频控制器四个核心变量Column 布局内 Video 核心组件配置包含 src 视频源、previewUri 封面、controller 控制器三大必填参数链式修饰属性设置视频高度、静音、循环、禁止自动播放、关闭原生控制器、圆角样式关键要点controls(false)必须关闭系统自带播放条才能使用自定义按钮。3.2 自定义按钮 Stack 布局完整代码截图Stack 层叠容器用来承载自定义按钮设置宽高铺满父容器两个圆形按钮播放按钮、暂停按钮分别设置圆角、尺寸、背景色按钮绑定点击事件调用控制器start()/pause()控制视频播放状态。四、真机 / 模拟器预览效果截图说明4.1 最终运行效果图在两张代码截图下方补充说明右侧手机预览窗口即为页面最终展示效果页面标题「本地视频播放器」上方带圆角视频窗口底部两个蓝色圆形自定义播放、暂停按钮视频未播放时自动显示封面图。五、关键配置图文说明5.1 网络视频权限配置补充文字说明无截图可省略播放在线网络视频需要在module.json5文件中添加网络权限ohos.permission.INTERNET否则无法加载网络视频资源。六、功能拓展图文思路新增停止按钮在 Stack 布局内追加按钮调用controller.stop()进度跳转新增滑块组件通过controller.seek(秒数)跳转播放进度播放完成监听在 Video 组件后链式绑定onFinish回调可做循环提示、自动重播逻辑。截图插入位置汇总清晰标注直接复制进博客章节「3.1 顶部变量定义与 Video 组件代码截图」下方插入第一张代码截图Index.ets 上半段代码那张章节「3.2 自定义按钮 Stack 布局完整代码截图」下方插入第二张代码截图Index.ets Stack 按钮下半段代码那张两张截图旁同步描述截图右侧手机预览窗口的运行效果不用额外单独插效果图直接依托截图自带的模拟器预览区域讲解即可。