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

Viedo组件

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

构造函数

Video(value: {src?: string | Resource, currentProgressRate?: number | string |PlaybackSpeed, previewUri?: string |PixelMap | Resource, controller?: VideoController})
参数名参数类型是否必填说明
srcstring | Resource否视频播放源的路径，可以是本地视频路径或网络路径，也可使用媒体库管理模块查询公共媒体库中的视频文件。
currentProgressRatenumber否视频播放倍速，支持0.75、1.0、1.25、1.75、2.0，默认值为1.0倍速。
previewUristring | PixelMap8+ | Resource否视频未播放时的预览图片路径或资源。
controllerVideoController否视频控制器，用于控制视频播放等相关功能。
@Component
export default struct VideoPlayer {private  source: string | Resource;private controller: VideoController;build() {Column() {Video({src: this.source,controller: this.controller})}}
}

组件属性

参数名参数类型是否必填默认值说明
mutedboolean否false是否静音。
autoPlayboolean否false是否自动播放。
controlsboolean否true控制视频播放的控制栏是否显示。
objectFitImageFit否Cover设置视频显示模式（可选值：Contain、Cover、Auto、Fill、ScaleDown、None）。
loopboolean否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. 完成和测试确保自定义弹窗按预期工作，进行测试，确保一切正常。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/140626.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Python中连接池的分析和应用

Python中连接池的分析和应用

连接池（Connection Pool）是在系统初始化的时候，将网络连接作为对象存储在内存中，当用户需要进行连接时，从连接池中取一个已经建立好的空连接对象，使用完后不关闭连接，将连接放回连接池&#xff…
阅读更多...
【Vue原理解析】之虚拟DOM

【Vue原理解析】之虚拟DOM

Vue.js是一款流行的JavaScript框架，它采用了虚拟DOM（Virtual DOM）的概念来提高性能和开发效率。虚拟DOM是Vue.js的核心之一，它通过在内存中构建一个轻量级的DOM树来代替直接操作真实的DOM，从而减少了对真实DOM的操作次…
阅读更多...
暖手宝上架亚马逊美国站UL499报告测试标准要求

暖手宝上架亚马逊美国站UL499报告测试标准要求

暖手宝是运用物理及化学原理研制的自动取暖保健用品。该产品以其自动生热，有趣，实用等新颖独特的优势，深受欢迎——暖手宝具有自动取暖，理疗保健等多种功能。只要插上电源等上10分钟左右就能发热，最后一种是通过锂电池…
阅读更多...
【华为OD题库-015】报文重排序-Java

【华为OD题库-015】报文重排序-Java

题目 对报文进行重传和重排序是常用的可靠性机制&#xff0c;重传缓冲区内有一定数量的子报文&#xff0c;每个子报文在原始报文中的顺序已知&#xff0c;现在需要恢复出原始报文。 输入描述 输入第一行为N,表示子报文的个数&#xff0c;0<N < 1000。 输入第二行为N个子报…
阅读更多...
多线程 浏览器渲染引擎 图形用户界面（GUI，Graphical User Interface）应用程序

多线程 浏览器渲染引擎 图形用户界面（GUI，Graphical User Interface）应用程序

目录 多线程浏览器渲染引擎图形用户界面&#xff08;GUI&#xff0c;Graphical User Interface&#xff09;应用程序 &#x1f44d; 点赞&#xff0c;你的认可是我创作的动力&#xff01; ⭐️ 收藏&#xff0c;你的青睐是我努力的方向&#xff01; ✏️ 评论&#xff0c;你的…
阅读更多...
【FISCO BCOS】十九、区块链浏览器部署

【FISCO BCOS】十九、区块链浏览器部署

目录 一、环境依赖 检查环境 1.检查java 二、拉取安装脚本 获取部署安装包 ​编辑 解压安装包 进入目录 三、修改配置 四、部署服务 五、状态检查 检查前后端进程 1.检查后端server进程 2.检查前端的nginx进程 检查进程端口 六、使用区块链浏览器 1.配置群组…
阅读更多...
EDA实验-----3-8译码器设计(QuartusII)

EDA实验-----3-8译码器设计(QuartusII)

目录 一. 实验目的 二. 实验仪器 三. 实验原理及内容 1.实验原理 2.实验内容 四&#xff0e;实验步骤 五. 实验报告 六. 注意事项 七. 实验过程 1.创建Verilog文件&#xff0c;写代码 ​编辑 2.波形仿真 3.连接电路图 4.烧录操作 一. 实验目的 学会Verilog HDL的…
阅读更多...
【Java 进阶篇】Java与JQuery：探秘事件绑定、入口函数与样式控制

【Java 进阶篇】Java与JQuery：探秘事件绑定、入口函数与样式控制

在现代的Web开发中&#xff0c;Java和JQuery是两个不可或缺的角色。Java为我们提供了强大的后端支持&#xff0c;而JQuery则是前端开发的得力助手。本篇博客将围绕Java和JQuery&#xff0c;深入探讨事件绑定、入口函数和样式控制&#xff0c;带你进入前端开发的奇妙世界。 Jav…
阅读更多...
ROS基础—vscode创建工作空间

ROS基础—vscode创建工作空间

1、创建ROS工作空间 首先打开ubuntu的终端&#xff0c;接着依次输入如下的命令行&#xff1b; mkdir -p xxx_ws/src(必须得有 src) cd xxx_ws catkin_make当然我一般是新建一个叫做demo的工作空间&#xff0c;如 mkdir -p demo04_ws/src 2、启动vscode cd xxx_ws code . …
阅读更多...
采购申请 审批 Release strategy 页签控制自定义是否显示

采购申请 审批 Release strategy 页签控制自定义是否显示

出口增强 T-CODE SMOD M06B0005 EXIT_SAPLEBND_004
阅读更多...
粉够荣获淘宝联盟区域理事会常务理事，携手共铸淘客新生态

粉够荣获淘宝联盟区域理事会常务理事，携手共铸淘客新生态

淘宝联盟区域理事会于2021年成立&#xff0c;首届成立成都、广州、武汉&#xff0c;服务近2000个领军淘宝客企业&#xff0c;作为区域生态与官方交流重要枢纽&#xff0c;理事会举办近百场交流分享会&#xff0c;带动淘客跨域跨业态交流成长。 2023年9月7日第二届淘宝联盟理事…
阅读更多...
Unity中关于Lerp()方法的使用

Unity中关于Lerp()方法的使用

在Unity中&#xff0c;Lerp()方法用于在两个值之间进行线性插值。 它的语法有&#xff1a; public static float Lerp(float a, float b, float t);//在两个float类型的值a和b之间进行线性插值 public static Vector2 Lerp(Vector2 a, Vector2 b, float t);//在两个Vector2类…
阅读更多...
【Maven教程】（十）：使用 Hudson 进行持续集成—— 从Hudson的安装到任务创建 ~

【Maven教程】（十）：使用 Hudson 进行持续集成—— 从Hudson的安装到任务创建 ~

Maven 使用 Hudson 进行持续集成 1️⃣ 持续集成的作用、过程和优势2️⃣ Hudson 简介与安装3️⃣ 准备 Subversion 仓库4️⃣ Hudson 的基本系统设置5️⃣ 创建 Hudson 任务5.1 Hudson 任务的基本配置5.2 Hudson 任务的源码仓库配置5.3 Hudson 任务的构建触发配置5.4 Hudson …
阅读更多...
debian 添加开机启动项

debian 添加开机启动项

有的时候&#xff0c;经常有自己需要的程序&#xff0c;官方并没有提供添加开机启动的方法&#xff0c;但我们却需要让他们开机启动&#xff08;比如探针类、飞机类、服务类程序等&#xff09;。可能有的人会说&#xff0c;可以使用 /etc/rc.local 啊。是可以使用这个&#xff…
阅读更多...
AI：86-基于深度学习的人体姿态估计与运动分析

AI：86-基于深度学习的人体姿态估计与运动分析

🚀 本文选自专栏：人工智能领域200例教程专栏 从基础到实践，深入学习。无论你是初学者还是经验丰富的老手，对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带有在本地跑过的代码，详细讲解供大家学习，希望可以帮到大家。欢迎订阅支持，正在不断更新中，…
阅读更多...
Leetcode—2469.温度转换【简单】

Leetcode—2469.温度转换【简单】

2023每日刷题&#xff08;二十六&#xff09; Leetcode—2469.温度转换 实现代码 /*** Note: The returned array must be malloced, assume caller calls free().*/ double* convertTemperature(double celsius, int* returnSize) {double* ans (double *)malloc(sizeof(do…
阅读更多...
Springboot+vue的高校办公室行政事务管理系统（有报告）。Javaee项目，springboot vue前后端分离项目。

Springboot+vue的高校办公室行政事务管理系统（有报告）。Javaee项目，springboot vue前后端分离项目。

演示视频&#xff1a; Springbootvue的高校办公室行政事务管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot vue前后端分离项目 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。…
阅读更多...
某XX自考小程序的AES加密分析

某XX自考小程序的AES加密分析

前言 主要是报了自考在这个小程序上面做题&#xff0c;就研究了一下这个接口本文仅供学习交流使用&#xff0c;请勿随意传播。如有侵犯你的权益及时联系我删除。 一、抓包分析打开小程序&#xff0c;打开devtools 工具&#xff0c;这里就不啰嗦&#xff0c;直接上过程。 点击…
阅读更多...
入选《人工智能领域内容榜》

入选《人工智能领域内容榜》

2023-11-13 入选《人工智能领域内容榜》31 C# OpenCvSharp DNN HybridNets 同时处理车辆检测、可驾驶区域分割、车道线分割
阅读更多...
maven 私有仓库配置

maven 私有仓库配置

1.整体库信息 2.配置阿里云库 &#xff08;可以配置多个库&#xff0c;再引用代理库&#xff09; 3.建立自己的 发布&#xff0c;快照库 4.建立自由的公共库- 引用所有需要的库 5.maven setting 中配置 用户名密码 <server><id>mv-releases</id><usernam…
阅读更多...
最新文章

Copyright @ 2022~2023