44、鴻蒙HarmonyOS Next開發：視頻播放 (Video)組件和進度條 (Progress)組件的使用

目錄

視頻播放 (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