目录

视频播放 (Video)

创建视频组件

加载视频资源

加载本地视频

加载沙箱路径视频

加载网络视频

添加属性

事件调用

Video控制器使用

其他说明

示例代码

进度条 (Progress)

创建进度条

设置进度条样式

场景示例

视频播放 (Video)

Video组件用于播放视频文件并控制其播放状态，常用于短视频和应用内部视频的列表页面。当视频完整出现时会自动播放，用户点击视频区域则会暂停播放，同时显示播放进度条，通过拖动播放进度条指定视频播放到具体位置。

创建视频组件

Video通过调用接口来创建，接口调用形式如下：

Video(value: VideoOptions)

加载视频资源

Video组件支持加载本地视频和网络视频。具体的数据源配置请参考VideoOptions对象说明。

加载本地视频

  • 普通本地视频。

    加载本地视频时，首先在本地rawfile目录指定对应的文件，如下图所示。

    再使用资源访问符$rawfile()引用视频资源。

    // xxx.ets
@Component
export struct VideoPlayer {private controller: VideoController = new VideoController()private previewUris: Resource = $r('app.media.preview')private innerResource: Resource = $rawfile('videoTest.mp4')build() {Column() {Video({src: this.innerResource,  // 设置视频源previewUri: this.previewUris, // 设置预览图controller: this.controller //设置视频控制器，可以控制视频的播放状态})}}
}

  • Data Ability提供的视频路径带有dataability://前缀，使用时确保对应视频资源存在。

    // xxx.ets
@Component
export struct VideoPlayer {private controller: VideoController = new VideoController()private previewUris: Resource = $r('app.media.preview')private videoSrc: string = 'dataability://device_id/com.domainname.dataability.videodata/video/10'build() {Column() {Video({src: this.videoSrc,previewUri: this.previewUris,controller: this.controller})}}
}

加载沙箱路径视频

支持file://路径前缀的字符串，用于读取应用沙箱路径内的资源，需要确保应用沙箱目录路径下的文件存在并且有可读权限。

// xxx.ets
@Component
export struct VideoPlayer {private controller: VideoController = new VideoController()private videoSrc: string = 'file:///data/storage/el2/base/haps/entry/files/show.mp4'build() {Column() {Video({src: this.videoSrc,controller: this.controller})}}
}

加载网络视频

加载网络视频时，需要申请ohos.permission.INTERNET权限，具体申请方式请参考声明权限。此时，Video的src属性为网络视频的链接。

// xxx.ets
@Component
export struct VideoPlayer {private controller: VideoController = new VideoController()private previewUris: Resource = $r('app.media.preview')private videoSrc: string = 'https://www.example.com/example.mp4' // 使用时请替换为实际视频加载网址build() {Column() {Video({src: this.videoSrc,previewUri: this.previewUris,controller: this.controller})}}
}

添加属性

Video组件属性主要用于设置视频的播放形式。例如设置视频播放是否静音、播放是否显示控制条等。

// xxx.ets
@Component
export struct VideoPlayer {private controller: VideoController = new VideoController()build() {Column() {Video({controller: this.controller}).muted(false) // 设置是否静音.controls(false) // 设置是否显示默认控制条.autoPlay(false) // 设置是否自动播放.loop(false) // 设置是否循环播放.objectFit(ImageFit.Contain) // 设置视频填充模式}}
}

事件调用

Video组件回调事件主要包括播放开始、播放暂停、播放结束、播放失败、播放停止、视频准备和操作进度条等事件，除此之外，Video组件也支持通用事件的调用，如点击、触摸等事件的调用。

// xxx.ets
@Entry
@Component
struct VideoPlayer {private controller: VideoController = new VideoController()private previewUris: Resource = $r('app.media.preview')private innerResource: Resource = $rawfile('videoTest.mp4')build() {Column() {Video({src: this.innerResource,previewUri: this.previewUris,controller: this.controller}).onUpdate((event) => { // 更新事件回调console.info("Video update.");}).onPrepared((event) => { // 准备事件回调console.info("Video prepared.");}).onError(() => { // 失败事件回调console.error("Video error.");}).onStop(() => { // 停止事件回调console.info("Video stopped.");})}}
}

Video控制器使用

Video控制器主要用于控制视频的状态，包括播放、暂停、停止以及设置进度等，详细使用请参考VideoController使用说明。

  • 默认控制器

    默认的控制器支持视频的开始、暂停、进度调整、全屏显示四项基本功能。

    // xxx.ets
@Entry
@Component
struct VideoGuide {@State videoSrc: Resource = $rawfile('videoTest.mp4')@State previewUri: string = 'common/videoIcon.png'@State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_Xbuild() {Row() {Column() {Video({src: this.videoSrc,previewUri: this.previewUri,currentProgressRate: this.curRate // 设置视频播放倍速})}.width('100%')}.height('100%')}
}

  • 自定义控制器

    使用自定义的控制器，先关闭默认控制器，然后使用button以及slider等组件进行自定义的控制与显示，适合自定义较强的场景下使用。

    // xxx.ets
@Entry
@Component
struct VideoGuide {@State videoSrc: Resource = $rawfile('videoTest.mp4')@State previewUri: string = 'common/videoIcon.png'@State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X@State currentTime: number = 0@State durationTime: number = 0controller: VideoController = new VideoController()build() {Row() {Column() {Video({src: this.videoSrc,previewUri: this.previewUri,currentProgressRate: this.curRate,controller: this.controller}).controls(false).autoPlay(true).onPrepared((event) => {if (event) {this.durationTime = event.duration}}).onUpdate((event) => {if (event) {this.currentTime = event.time}})Row() {Text(JSON.stringify(this.currentTime) + 's')Slider({value: this.currentTime,min: 0,max: this.durationTime}).onChange((value: number, mode: SliderChangeMode) => {this.controller.setCurrentTime(value); // 设置视频播放的进度跳转到value处}).width("90%")Text(JSON.stringify(this.durationTime) + 's')}.opacity(0.8).width("100%")}.width('100%')}.height('40%')}
}

其他说明

Video组件已经封装好了视频播放的基础能力，开发者无需进行视频实例的创建，视频信息的设置获取，只需要设置数据源以及基础信息即可播放视频，相对扩展能力较弱。如果开发者想自定义视频播放，请参考视频播放。

示例代码

  • 媒体库视频

进度条 (Progress)

Progress是进度条显示组件，显示内容通常为目标操作的当前进度。

创建进度条

Progress通过调用接口来创建，接口调用形式如下：

Progress(options: {value: number, total?: number, type?: ProgressType})

其中，value用于设置初始进度值，total用于设置进度总长度，type用于设置Progress样式。

Progress({ value: 24, total: 100, type: ProgressType.Linear }) // 创建一个进度总长为100，初始进度值为24的线性进度条

设置进度条样式

Progress有5种可选类型，通过ProgressType可以设置进度条样式。ProgressType类型包括：ProgressType.Linear（线性样式）、 ProgressType.Ring（环形无刻度样式）、ProgressType.ScaleRing（环形有刻度样式）、ProgressType.Eclipse（圆形样式）和ProgressType.Capsule（胶囊样式）。

  • 线性样式进度条（默认类型）

    从API version 9开始，组件高度大于宽度时，自适应垂直显示；组件高度等于宽度时，保持水平显示。

    Progress({ value: 20, total: 100, type: ProgressType.Linear }).width(200).height(50)
Progress({ value: 20, total: 100, type: ProgressType.Linear }).width(50).height(200)

  • 环形无刻度样式进度条  
    // 从左往右，1号环形进度条，默认前景色为蓝色渐变，默认strokeWidth进度条宽度为2.0vp
Progress({ value: 40, total: 150, type: ProgressType.Ring }).width(100).height(100)
// 从左往右，2号环形进度条
Progress({ value: 40, total: 150, type: ProgressType.Ring }).width(100).height(100).color(Color.Grey)    // 进度条前景色为灰色.style({ strokeWidth: 15})    // 设置strokeWidth进度条宽度为15.0vp

  • 环形有刻度样式进度条 
    Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100).backgroundColor(Color.Black).style({ scaleCount: 20, scaleWidth: 5 })    // 设置环形有刻度进度条总刻度数为20，刻度宽度为5vp
Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100).backgroundColor(Color.Black).style({ strokeWidth: 15, scaleCount: 20, scaleWidth: 5 })    // 设置环形有刻度进度条宽度15，总刻度数为20，刻度宽度为5vp
Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100).backgroundColor(Color.Black).style({ strokeWidth: 15, scaleCount: 20, scaleWidth: 3 })    // 设置环形有刻度进度条宽度15，总刻度数为20，刻度宽度为3vp

  • 圆形样式进度条 
    // 从左往右，1号圆形进度条，默认前景色为蓝色
Progress({ value: 10, total: 150, type: ProgressType.Eclipse }).width(100).height(100)
// 从左往右，2号圆形进度条，指定前景色为灰色
Progress({ value: 20, total: 150, type: ProgressType.Eclipse }).color(Color.Grey).width(100).height(100)

  • 胶囊样式进度条 
    Progress({ value: 10, total: 150, type: ProgressType.Capsule }).width(100).height(50)
Progress({ value: 20, total: 150, type: ProgressType.Capsule }).width(50).height(100).color(Color.Grey)
Progress({ value: 50, total: 150, type: ProgressType.Capsule }).width(50).height(100).color(Color.Blue).backgroundColor(Color.Black)

头尾两端圆弧处的进度展示效果与ProgressType.Eclipse样式一致。

中段处的进度展示效果为矩形状长条，与ProgressType.Linear线性样式相似。

组件高度大于宽度时，自适应垂直显示。

    场景示例

    更新当前进度值，如应用安装进度条，可通过点击Button增加progressValue，value属性将progressValue设置给Progress组件，进度条组件即会触发刷新，更新当前进度。

    @Entry
@Component
struct ProgressCase1 { @State progressValue: number = 0;    // 设置进度条初始值为0build() {Column() {Column() {Progress({value:0, total:100, type:ProgressType.Capsule}).width(200).height(50).value(this.progressValue)Row().width('100%').height(5)Button("进度条+5").onClick(()=>{this.progressValue += 5;if (this.progressValue > 100){this.progressValue = 0;}})}}.width('100%').height('100%')}
}

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

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

    相关文章

    6、微服务架构常用十种设计模式

    6、微服务架构常用十种设计模式

    目录 1、微服务架构 2、微服务架构的优点 3、微服务架构的缺点 4、何时使用微服务架构 5、微服务架构常用十种设计模式 ① 独享数据库（Database per Microservice） ② 事件源（Event Sourcing） ③ 命令和查询职责分离&…
    阅读更多...
    Docker 初学者需要了解的几个知识点 (六）：docker-compose.yml （ThinkPHP）

    Docker 初学者需要了解的几个知识点 (六）：docker-compose.yml （ThinkPHP）

    下面这个文 docker-compose.yml 文件定义了一个包含 PHP、Nginx、MySQL、Redis 的完整 ThinkPHP 开发环境，各配置项的含义如下：version: 3.8services:# PHP-FPM 服务php-fpm:image: php:8.1-fpmvolumes:- ./tp-demo:/var/www/html- ./php.ini:/usr/local…
    阅读更多...
    TiDB 详解

    TiDB 详解

    TiDB 详解：架构、特性与应用实践 TiDB 是 PingCAP 公司开发的开源分布式 NewSQL 数据库，采用 “计算-存储分离” 架构设计，兼具传统关系型数据库的 ACID 事务特性和 NoSQL 系统的水平扩展能力。以下是 TiDB 的全面技术解析。一、核心架构设计…
    阅读更多...
    推客小程序商业模型设计：合规分佣体系×盈利模式×LTV提升策略

    推客小程序商业模型设计：合规分佣体系×盈利模式×LTV提升策略

    一、推客小程序的市场背景与商业价值在当今移动互联网红利逐渐消退的背景下，社交电商正成为流量增长的新突破口。推客小程序作为一种基于社交关系的分销工具，完美融合了社交传播与电商变现的双重优势，为企业和个人创业者提供了全新的商业机会…
    阅读更多...
    Matlab处理多个循环的判断的方式：

    Matlab处理多个循环的判断的方式：

    1、使用正则表达式：pattern strcat(\b, strjoin(tuple, \b|\b), \b);% 4. 逐行处理文件内容 modifiedContents {}; % 存储修改后的内容 for i 1:length(fileContents)line fileContents{i};% 使用正则表达式检查当前行是否包含元组中的任何元素if ~isempty(reg…
    阅读更多...
    从字符串中“薅出”最长子串：LeetCode 340 Swift 解法全解析

    从字符串中“薅出”最长子串：LeetCode 340 Swift 解法全解析

    文章目录摘要描述题解答案题解代码分析详细解析：示例测试及结果结果解释：时间复杂度总结摘要 在日常开发中，我们经常需要处理字符串，比如分析用户输入、文本挖掘、数据清洗等等。而这道题就特别实用：如何找到一个字符…
    阅读更多...
    时序数据库厂商 TDengine 发布 AI 原生的工业数据管理平台 IDMP，“无问智推”改变数据消费范式

    时序数据库厂商 TDengine 发布 AI 原生的工业数据管理平台 IDMP，“无问智推”改变数据消费范式

    在工业企业越来越依赖数据驱动决策的今天，数据的获取不再是难题，难的是从纷繁复杂的数据中提炼出有用的信息。而 AI 的崛起，正在重塑整个数据分析的逻辑。 7 月 29 日晚，TDengine 发布了一款全新产品 —— TDengine IDMP&#xf…
    阅读更多...
    HBase、MongoDB 和 Redis 的区别详解

    HBase、MongoDB 和 Redis 的区别详解

    这三者都是流行的 NoSQL 数据库，但设计目标、数据模型和适用场景有显著差异。以下是它们的核心对比： 1. 数据模型对比特性HBaseMongoDBRedis数据模型宽列存储（类似 BigTable）文档存储（BSON/JSON）键值存储&a…
    阅读更多...
    设计模式之单例模式及其在多线程下的使用

    设计模式之单例模式及其在多线程下的使用

    很多时候，我们在使用类创建类的实例并不想可以创建很多实例对象，比如在数据库连接的时候，对于一个数据库的连接通常只需要连接池中的某个连接的实例，连接一次即可，对于session会话，用户在访问网页做会话保持…
    阅读更多...
    Apache Ignite 2.8 引入的新指标系统（New Metrics System）的完整说明

    Apache Ignite 2.8 引入的新指标系统（New Metrics System）的完整说明

    这段文档是关于 Apache Ignite 2.8 引入的“新指标系统（New Metrics System）” 的完整说明。这是 Ignite 监控体系的一次重大升级，相比旧的、分散的统计方式，新系统更统一、灵活、可扩展。 我们来逐层拆解、通俗易懂地理解这个新…
    阅读更多...
    【氮化镓】GaN同质外延p-i-n二极管中星形与三角形扩展表面缺陷的电子特性

    【氮化镓】GaN同质外延p-i-n二极管中星形与三角形扩展表面缺陷的电子特性

    2025年7月23日，美国国家标准与技术研究院（NIST）与美国海军研究实验室的Andrew J. Winchester等人在《Applied Physics Letters》期刊发表了题为《Electronic properties of extended surface defects in homoepitaxial GaN diodes》的文章，基于光电发射电子显微术、导电原子…
    阅读更多...
    使用 Scrapy 框架定制爬虫中间件接入淘宝 API 采集商品数据

    使用 Scrapy 框架定制爬虫中间件接入淘宝 API 采集商品数据

    一、引言 在电商数据分析、市场调研等领域，获取淘宝平台上的商品数据是一项常见需求。淘宝提供了 API 接口，允许开发者通过授权的方式获取商品信息。本文将介绍如何使用 Scrapy 框架定制爬虫中间件，实现对淘宝 API 的接入，从而高…
    阅读更多...
    Jmeter全局变量跨线程组的使用

    Jmeter全局变量跨线程组的使用

    一、线程组1中从数据库中查询到字段值二、BeanShell取样器中设置为全局变量#为什么说props.put("Out1",Out);其实是设置Out1为Jmeter的属性了呢？ 因为在后面的调试取样器运行结果中，会发现如果只打开显示变量开关，是看不到Out1运行…
    阅读更多...
    前端技术栈详解

    前端技术栈详解

    前端技术栈是指构建现代Web应用程序所需的一系列技术和工具的集合。以下是当前主流前端技术栈的详细解析&#xff1a; 一、核心基础技术 1. HTML5 作用&#xff1a;网页内容的结构化标记关键特性&#xff1a; 语义化标签&#xff08;<header>, <section>, <arti…
    阅读更多...
    Git Pull 时遇到 Apply 和 Abort 选项？详解它们的含义与应对策略

    Git Pull 时遇到 Apply 和 Abort 选项？详解它们的含义与应对策略

    在使用 Git 进行团队协作时&#xff0c;git pull 是最常用的命令之一&#xff0c;用于拉取远程仓库的最新代码并合并到本地分支。但有时执行 git pull 后&#xff0c;Git 会提示 ​Apply&#xff08;应用&#xff09;​​ 和 ​Abort&#xff08;中止&#xff09;​​ 两个选项…
    阅读更多...
    暑期算法训练.11

    暑期算法训练.11

    目录 47. 力扣203 移除链表元素 47.1 题目解析&#xff1a; ​编辑 47.2 算法思路&#xff1a; 47.3 代码演示&#xff1a; ​编辑 48. 力扣2.两数相加 48.1 题目解析&#xff1a; ​编辑 48.2 算法思路; 48.3 代码演示&#xff1a; 48.4 总结反思&#xff1a; …
    阅读更多...
    nl2sql grpo强化学习训练，加大数据量和轮数后，准确率没提升，反而下降了，如何调整

    nl2sql grpo强化学习训练，加大数据量和轮数后，准确率没提升，反而下降了，如何调整

    在NL2SQL任务中使用GRPO强化学习训练时&#xff0c;增加数据量和训练轮数后准确率下降&#xff0c;通常是由过拟合、训练不稳定、奖励函数设计不合理、数据质量问题或探索-利用失衡等原因导致的。以下是具体的诊断思路和调整策略&#xff0c;帮助定位问题并优化性能&#xff1a…
    阅读更多...
    PHP/Java/Python实现：如何有效防止恶意文件上传

    PHP/Java/Python实现：如何有效防止恶意文件上传

    文章目录 木马病毒防范：文件上传如何彻底防止伪造文件类型 引言 一、文件类型伪造的原理与危害 1.1 常见伪造手段 1.2 潜在危害 二、防御体系设计 2.1 防御架构 三、核心防御技术实现 3.1 服务端验证实现 3.1.1 文件内容检测（Python示例） 3.1.2 扩展名与内容双重验证（Java示…
    阅读更多...
    SpringBoot系列之基于Redis的分布式限流器

    SpringBoot系列之基于Redis的分布式限流器

    SpringBoot系列之基于Redis的分布式限流器 SpringBoot 系列之基于 Redis 的分布式限流器 图文并茂，代码即拷即用，支持 4 种算法（固定窗口 / 滑动窗口 / 令牌桶 / 漏桶） 一、为什么要用分布式限流？ 单机 Guava-RateLimiter 在集群下会 各玩各的，流量漂移，无法全局控量。…
    阅读更多...
    面试遇到的问题2

    面试遇到的问题2

    Redisson的看门狗相关问题 首先要明确一点&#xff0c;看门狗机制的使用方式是&#xff1a;在加锁的时候不加任何参数&#xff0c;也就是&#xff1a; RLock lock redisson.getLock("myLock"); try {lock.lock(); // 阻塞式加锁// 业务逻辑... } finally {lock.unl…
    阅读更多...
    最新文章

    Copyright @ 2022~2023