ArkTS代码Entry Component struct LocalVideoPlayer { private videoController: VideoController new VideoController(); build() { Column() { Text(本地视频播放器) .fontSize(28) .textAlign(TextAlign.Center) .width(100%) .margin({ bottom: 15 }); Video({ src: $rawfile(3.mp4), previewUri: $r(app.media.background), controller: this.videoController }) .width(100%) .layoutWeight(1) // 核心修改占满剩余高度限制视频不溢出屏幕 .controls(false) .autoPlay(true) .loop(true) .muted(false) .objectFit(ImageFit.Cover) .margin({ bottom: 10 }); Row({ space: 30 }) { Button(播放) Button(暂停) } .justifyContent(FlexAlign.Center) .margin({ bottom: 10 }) } .padding(15) .width(100%) .height(100%); } }代码运行结果代码解析Entry Component struct LocalVideoPlayer { private videoController: VideoController new VideoController(); }Entry标记当前结构体为页面入口main_pages.json注册页面必须添加系统识别为独立路由页面。ComponentArkTS 自定义组件标识所有页面 / 封装组件必须携带。struct LocalVideoPlayer自定义页面组件名称规范使用大驼峰命名。private videoController: VideoController new VideoController();声明视频控制器实例核心交互对象用于代码控制播放、暂停、跳转进度。private私有变量仅当前组件内部可访问。build() { Column() { // 标题文本 Text(本地视频播放器) .fontSize(28) .textAlign(TextAlign.Center) .width(100%) .margin({ bottom: 15 }); // 视频播放核心组件 Video({ src: $rawfile(3.mp4), previewUri: $r(app.media.background), controller: this.videoController }) .width(100%) .layoutWeight(1) .controls(false) .autoPlay(true) .loop(true) .muted(false) .objectFit(ImageFit.Cover) .margin({ bottom: 10 }); // 播放控制按钮行 Row({ space: 30 }) { Button(播放) Button(暂停) } .justifyContent(FlexAlign.Center) .margin({ bottom: 10 }) } .padding(15) .width(100%) .height(100%); }1. 根 Column 全局布局属性.padding(15)整体页面四周内边距 15px内容不贴屏幕边缘。.width(100%)/.height(100%)根容器铺满全屏。Column()垂直弹性布局内部元素从上到下依次排列。2. 标题 Text 组件Text(本地视频播放器)展示页面标题文字。.fontSize(28)文字字号 28。.textAlign(TextAlign.Center)文字在自身宽度内水平居中。.width(100%)文本宽度占满父容器。.margin({ bottom: 15 })底部外边距 15和下方视频拉开间距Video({ src: $rawfile(3.mp4), previewUri: $r(app.media.background), controller: this.videoController })构造参数说明src: $rawfile(3.mp4)$rawfile()读取entry/src/main/resources/rawfile/目录下静态资源存放短视频、音频。读取文件3.mp4视频必须是 H.264AAC 编码才能正常解码。previewUri: $r(app.media.background)$r(app.media.xxx)读取base/media/目录图片作为视频加载完成前的预览封面图。controller: this.videoController绑定控制器实例实现代码手动操控视频。Video 链式属性.width(100%)视频宽度填满父容器。.layoutWeight(1)弹性权重分配Column 内剩余高度全部给视频自动自适应屏幕不会溢出。.controls(false)关闭系统自带播放进度条 / 暂停按钮由下方自定义 Button 接管控制。.autoPlay(true)页面加载完成后自动播放视频。 ⚠️ 真机限制部分鸿蒙系统会拦截自动播放需要配合静音.muted(true)才能生效。.loop(true)视频播放完毕后自动循环重播。.muted(false)不静音正常输出视频原声改为true则静音。.objectFit(ImageFit.Cover)画面填充规则等比例放大铺满视频容器超出部分裁剪类似手机全屏播放效果。 可选替换ImageFit.Contain完整显示画面不会裁剪会出现黑边。.margin({ bottom: 10 })视频底部外边距 10和下方按钮分隔。Row({ space: 30 }) { Button(播放) Button(暂停) } .justifyContent(FlexAlign.Center) .margin({ bottom: 10 })Row({ space: 30 })水平布局两个按钮之间固定间距 30px。Button(播放)/Button(暂停)控制按钮当前代码缺少点击事件逻辑。.justifyContent(FlexAlign.Center)Row 内部元素整体水平居中。.margin({ bottom: 10 })按钮区域底部外边距。