当前位置：首页 > news >正文

HarmonyOS应用开发-视频播放器与弹窗

news 2025/9/11 16:18:35

`Viedo`组件

在手机、平板或是智慧屏这些终端设备上，媒体功能可以算作是我们最常用的场景之一。无论是实现音频的播放、录制、采集，还是视频的播放、切换、循环，亦或是相机的预览、拍照等功能，媒体组件都是必不可少的。以视频功能为例，在应用开发过程中，我们需要通过ArkUI提供的Video组件为应用增加基础的视频播放功能。借助Video组件，我们可以实现视频的播放功能并控制其播放状态。常见的视频播放场景包括观看网络上的较为流行的短视频，也包括查看我们存储在本地的视频内容。

构造函数

Video(value: {src?: string | Resource, currentProgressRate?: number | string |PlaybackSpeed, previewUri?: string |PixelMap | Resource, controller?: VideoController})

参数名	参数类型	是否必填	说明
src	string \| Resource	否	视频播放源的路径，可以是本地视频路径或网络路径，也可使用媒体库管理模块查询公共媒体库中的视频文件。
currentProgressRate	number	否	视频播放倍速，支持0.75、1.0、1.25、1.75、2.0，默认值为1.0倍速。
previewUri	string \| PixelMap8+ \| Resource	否	视频未播放时的预览图片路径或资源。
controller	VideoController	否	视频控制器，用于控制视频播放等相关功能。

@Component
export default struct VideoPlayer {private  source: string | Resource;private controller: VideoController;build() {Column() {Video({src: this.source,controller: this.controller})}}
}

组件属性

参数名	参数类型	是否必填	默认值	说明
muted	boolean	否	false	是否静音。
autoPlay	boolean	否	false	是否自动播放。
controls	boolean	否	true	控制视频播放的控制栏是否显示。
objectFit	ImageFit	否	Cover	设置视频显示模式（可选值：Contain、Cover、Auto、Fill、ScaleDown、None）。
loop	boolean	否	false	是否单个视频循环播放。

@Component
export default struct VideoPlayer {private  source: string | Resource;private controller: VideoController;build() {Column() {Video({src: this.source,controller: this.controller}).controls(false) //不显示控制栏 .autoPlay(false) // 手动点击播放 .loop(false) // 关闭循环播放 }}
}

事件

事件处理函数	参数类型	说明
onStart(event: () => void)	无参数	播放时触发该事件，执行指定的回调函数。
onPause(event: () => void)	无参数	暂停时触发该事件，执行指定的回调函数。
onFinish(event: () => void)	无参数	播放结束时触发该事件，执行指定的回调函数。
onError(event: () => void)	无参数	播放失败时触发该事件，执行指定的回调函数。
onPrepared(callback: (event?: { duration: number }) => void)	event 可选参数：{ duration: number }	视频准备完成时触发该事件，通过`duration`参数获取视频时长。
onSeeking(callback: (event?: { time: number }) => void)	event 可选参数：{ time: number }	操作进度条过程中上报时间信息，单位为秒。
onSeeked(callback: (event?: { time: number }) => void)	event 可选参数：{ time: number }	操作进度条完成后，上报播放时间信息，单位为秒。
onUpdate(callback: (event?: { time: number }) => void)	event 可选参数：{ time: number }	播放进度变化时触发该事件，单位为秒，更新时间间隔为250毫秒。
onFullscreenChange(callback: (event?: { fullscreen: boolean }) => void)	event 可选参数：{ fullscreen: boolean }	在全屏播放与非全屏播放状态之间切换时触发该事件。

Dialog组件

弹窗类型	简要说明
确认类弹窗 (AlertDialog)	用于向用户显示警告或要求用户确认操作。用户必须做出选择或取消对话框，然后才能继续操作。
选择类弹窗 (TextPickerDialog, DatePickerDialog, TimePickerDialog)	用于在用户需要选择文本、日期或时间时提供方便的选择界面。用户可以从预定义的选项中进行选择。
自定义弹窗 (CustomDialog)	如果内置的弹窗类型不能满足您的需求，您可以创建自定义弹窗，以满足特定的业务需求。这允许您完全控制弹窗的布局和样式。

警告弹窗

Button('点击显示弹窗').onClick(() => {AlertDialog.show({title: '删除联系人', // 标题message: '是否需要删除所选联系人?', // 内容autoCancel: false, // 点击遮障层时，是否关闭弹窗。alignment: DialogAlignment.Bottom, // 弹窗在竖直方向的对齐方式offset: { dx: 0, dy: -20 }, // 弹窗相对alignment位置的偏移量primaryButton: {value: '取消',action: () => {console.info('Callback when the first button is clicked');}},secondaryButton: {value: '删除',fontColor: '#D94838',action: () => {console.info('Callback when the second button is clicked');}},cancel: () => { // 点击遮障层关闭dialog时的回调console.info('Closed callbacks');}})})

以下是 AlertDialog 弹窗示例代码中的属性和它们的作用的表格说明：

属性	作用
title	弹窗标题，通常用于简洁地描述弹窗的目的或内容。
message	弹窗消息内容，通常用于提供更详细的信息或指导用户操作。
autoCancel	指定点击遮障层时，是否关闭弹窗，如果设置为 `true`，点击遮障层会关闭弹窗，否则不会。
alignment	弹窗在竖直方向的对齐方式，此处设置为 `DialogAlignment.Bottom` 表示弹窗出现在底部。
offset	弹窗相对于 `alignment` 位置的偏移量，这里的 `{ dx: 0, dy: -20 }` 表示垂直偏移 -20 像素。
primaryButton	主要按钮配置，包括按钮文本和点击按钮时的回调函数。
secondaryButton	次要按钮配置，包括按钮文本、按钮字体颜色和点击按钮时的回调函数。
cancel	点击遮障层关闭弹窗时的回调函数，通常用于执行额外的关闭操作。

这个表格提供了示例代码中用到的属性和它们的作用。这些属性允许您自定义弹窗的外观和行为，以适应您的应用需求。如果需要更多信息或有其他问题，请随时提问。

文本选择弹窗

TextPickerDialog.show({range: this.fruits, // 设置文本选择器的选择范围selected: this.select, // 设置初始选中项的索引值。onAccept: (value: TextPickerResult) => { // 点击弹窗中的“确定”按钮时触发该回调。// 设置select为按下确定按钮时候的选中项index，这样当弹窗再次弹出时显示选中的是上一次确定的选项this.select = value.index;console.info("TextPickerDialog:onAccept()" + JSON.stringify(value));},onCancel: () => { // 点击弹窗中的“取消”按钮时触发该回调。console.info("TextPickerDialog:onCancel()");},onChange: (value: TextPickerResult) => { // 滑动弹窗中的选择器使当前选中项改变时触发该回调。console.info("TextPickerDialog:onChange()" + JSON.stringify(value));}})})

配置选项	作用
`range`	设置文本选择器的选择范围，即用户可以从中选择的选项列表。
`selected`	设置初始选中项的索引值。这样可以确保弹窗显示时选中的是上一次确定的选项。
`onAccept`	回调函数，当用户点击弹窗中的“确定”按钮时触发，允许执行相关操作。
`onCancel`	回调函数，当用户点击弹窗中的“取消”按钮时触发，允许执行相关操作。
`onChange`	回调函数，当用户在弹窗中的选择器上滑动以更改当前选中项时触发，允许执行相关操作。

日期选择框

DatePickerDialog.show({start: new Date("1900-1-1"), // 设置选择器的起始日期end: new Date("2023-12-31"), // 设置选择器的结束日期selected: this.selectedDate, // 设置当前选中的日期lunar: false,onAccept: (value: DatePickerResult) => { // 点击弹窗中的“确定”按钮时触发该回调// 通过Date的setFullYear方法设置按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期this.selectedDate.setFullYear(value.year, value.month, value.day)console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))},onCancel: () => { // 点击弹窗中的“取消”按钮时触发该回调console.info("DatePickerDialog:onCancel()")},onChange: (value: DatePickerResult) => { // 滑动弹窗中的滑动选择器使当前选中项改变时触发该回调console.info("DatePickerDialog:onChange()" + JSON.stringify(value))}})})

配置选项	作用
`start`	设置选择器的起始日期，用户可以从中选择。
`end`	设置选择器的结束日期，用户可以从中选择。
`selected`	设置当前选中的日期，以确保弹窗再次弹出时选中的是上一次确定的日期。
`lunar`	布尔值，指示是否使用农历日期。
`onAccept`	回调函数，当用户点击弹窗中的“确定”按钮时触发，允许执行相关操作。
`onCancel`	回调函数，当用户点击弹窗中的“取消”按钮时触发，允许执行相关操作。
`onChange`	回调函数，当用户在弹窗中的滑动选择器上滑动以更改当前选中日期时触发，允许执行相关操作。

自定义弹框

@CustomDialog
export default struct CustomDialogWidget {@State hobbyBeans: HobbyBean[] = [];@Link hobbies: string;private controller: CustomDialogController;aboutToAppear() {...}setHobbiesValue(hobbyBeans: HobbyBean[]) {let hobbiesText: string = '';hobbiesText = hobbyBeans.filter((isCheckItem: HobbyBean) =>isCheckItem?.isChecked).map((checkedItem: HobbyBean) => {return checkedItem.label;}).join(',');this.hobbies = hobbiesText;}build() {Column() {Text($r('app.string.text_title_hobbies'))...List() {ForEach(this.hobbyBeans, (itemHobby: HobbyBean) => {ListItem() {Row() {Text(itemHobby.label)...Toggle({ type: ToggleType.Checkbox, isOn: false })....onChange((isCheck) => {itemHobby.isChecked = isCheck;})}}}, itemHobby => itemHobby.label)}Row() {Button($r("app.string.cancel_button"))....onClick(() => {this.controller.close();})Button($r("app.string.definite_button"))....onClick(() => {this.setHobbiesValue(this.hobbyBeans);this.controller.close();})}}}
}
customDialogController: CustomDialogController = new CustomDialogController({builder: CustomDialogWidget({onConfirm: this.setHobbiesValue.bind(this),}),alignment: DialogAlignment.Bottom,customStyle: true,offset: { dx: 0,dy: -20 }});

步骤	说明
1. 创建自定义弹窗组件	创建一个新的组件，标识为自定义弹窗组件。
2. 定义组件外观和行为	在弹窗组件中定义弹窗的外观、布局和行为，包括按钮、回调。
3. 创建弹窗控制器	创建一个弹窗控制器，用于管理弹窗的显示和关闭。
4. 配置弹窗控制器	在弹窗控制器中配置弹窗的外观和样式，如位置、大小等。
5. 显示弹窗	使用控制器的方法显示自定义弹窗，通常通过 `show` 方法触发。
6. 处理用户操作	在弹窗组件中定义回调函数，用于处理用户的操作，例如按钮点击。
7. 关闭弹窗	在弹窗组件中使用控制器的方法关闭弹窗，通常通过 `close` 方法。
8. 完成和测试	确保自定义弹窗按预期工作，进行测试，确保一切正常。