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

Viedo组件

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

构造函数

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

@Component
export default struct VideoPlayer {
  private  source: string | Resource;
  private controller: VideoController;

  build() {
    Column() {
      Video({
        src: this.source,
        controller: this.controller
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

组件属性

@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) // 关闭循环播放 
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

事件

Dialog组件

警告弹窗

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');
        }
      }
    )
  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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

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

文本选择弹窗

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));
            }
          })
        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

日期选择框

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))
            }
          })
        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

自定义弹框

@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
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57