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

`Viedo`组件

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

构造函数

ts 复制代码

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	否	视频控制器，用于控制视频播放等相关功能。

ts 复制代码

@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	是否单个视频循环播放。

ts 复制代码

@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)	如果内置的弹窗类型不能满足您的需求，您可以创建自定义弹窗，以满足特定的业务需求。这允许您完全控制弹窗的布局和样式。

警告弹窗

ts 复制代码

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	点击遮障层关闭弹窗时的回调函数，通常用于执行额外的关闭操作。

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

文本选择弹窗

ts 复制代码

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`	回调函数，当用户在弹窗中的选择器上滑动以更改当前选中项时触发，允许执行相关操作。

日期选择框

ts 复制代码

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`	回调函数，当用户在弹窗中的滑动选择器上滑动以更改当前选中日期时触发，允许执行相关操作。

自定义弹框

ts 复制代码

@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. 完成和测试	确保自定义弹窗按预期工作，进行测试，确保一切正常。

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

Viedo组件

构造函数

组件属性

事件

Dialog组件

警告弹窗

文本选择弹窗

日期选择框

自定义弹框

`Viedo`组件