1.Video 视频组件

页面基础装饰器

• @Entry：页面入口装饰器，标记当前页面为应用启动页面，预览器可直接渲染；
• @Component：自定义组件装饰器，所有 ArkUI 页面必须添加；
• struct Index：定义页面组件名称为 Index。

2. 视频控制器变量

• private：私有变量，仅当前页面内可使用；
• VideoController：视频控制器，用来控制视频播放、暂停、跳转等操作；
• new VideoController()：实例化控制器对象，绑定给 Video 组件。

3. 视频封面图资源变量

previewUri：存储视频未播放时展示的封面图片资源；
$r('app.media.background')：读取项目 media 文件夹下名为 background 的图片作为封面。
 

4. build () 渲染函数

页面渲染核心函数，页面加载自动执行内部代码绘制界面。

5. 外层 Column 垂直线性布局

• Column({space:30})：垂直线性布局，内部标题、视频、按钮三组组件垂直排列，垂直间距 30px；
• .width('100%').height('100%')：布局容器铺满手机全屏；
• Column 默认交叉轴水平居中，内部所有组件自动水平居中。

6. 页面标题 Text 文本

• Text("本地视频播放器")：文本组件，展示页面标题；
• .fontSize(24)：文字字号 24；
• .textAlign(TextAlign.Center)：文字自身居中对齐。

7. Video 视频播放核心组件

内部参数含义

1. src: $rawfile('bb.mp4')：读取项目 rawfile 文件夹下 bb.mp4 本地视频文件；
2. controller: this.controller：绑定上方创建的视频控制器，实现手动控制播放暂停；
3. previewUri: this.previewUri：绑定封面图片，视频未播放时显示该图；

链式样式 / 控制属性

• .width('100%').height(220)：视频宽度铺满父容器，高度固定 220px；
• .autoPlay(false)：关闭自动播放，进入页面不会自动播放视频；
• .loop(true)：开启循环播放，视频播放完毕自动从头重播；
• .muted(false)：不静音，播放时正常输出声音；
• .objectFit(ImageFit.Contain)：视频等比例完整显示，不会拉伸裁剪，留白填充黑边。

8. 底部按钮 Row 水平布局

• Row({space:10})：水平线性布局，两个按钮横向并排，按钮间距 10px；
• Button("播放") / Button("暂停")：交互按钮，用来调用控制器方法控制视频；
• .width('46%')：每个按钮占父容器宽度 46%，两个按钮加间距刚好铺满一行；
• .height(50)：按钮高度 50px；
• .fontSize(20)：按钮内文字字号 20。

2.Video 网络在线视频播放基础案例

1. 视频控制器实例化 定义私有VideoController控制器对象，作为视频播放的操作核心，统一管控播放进度、暂停、全屏等内置控制栏功能。
2. 网络视频资源加载 声明字符串变量存储公开网络视频 URL，将变量绑定至 Video 组件的src属性，实现加载互联网在线视频资源，区别于本地 rawfile 视频读取方式。
3. 最简 Video 组件结构 仅传入src视频地址与controller控制器两个必填参数，不额外配置封面、自动播放、循环等拓展属性，使用组件默认样式与行为，预览区自动生成带进度条、播放按钮的原生控制栏。
4. 适用场景区分 该案例演示网络流媒体播放基础用法，适合短视频、在线课程、网页视频加载等需要请求网络视频资源的业务，和本地视频播放器案例形成本地 / 网络两种视频加载方式对照学习。