拆·應用

【拆·應用】是為開源鴻蒙應用開發者打造的技術分享平臺，匯聚開發者的技術洞見與實踐經驗，提供開發心得與創新成果的展示窗口。誠邀您踴躍發聲，期待您的真知灼見與技術火花！

樣例簡介

在開源鴻蒙生態建設中，多媒體能力是構建豐富用戶體驗的核心要素。本開發樣例針對視頻播放場景，聚焦開源鴻蒙原生媒體框架，通過Video組件實現視頻資源加載、播放狀態控制及多樣化展示形態。重點演示組件化播放器封裝、全屏/窗口化動態切換、上下滑動輪播等關鍵技術方案，為開發者提供標準化視頻功能實現路徑，助力構建高性能、可定制的多媒體應用。

使用說明

啟動播放：首頁點擊播放按鈕，視頻開始播放；再次點擊畫面進入全屏模式

窗口化切換：在首頁向下滑500vp后，視頻自動切換為懸浮小窗模式

輪播體驗：點擊底部導航欄"直播"入口，上下滑動瀏覽推薦視頻流

開發環境準備

下載與安裝DevEco Studio

1.前往下載中心，登錄華為賬號后下載DevEco Studio，并根據下載中心頁面工具完整性指導進行完整性校驗。

2.安裝DevEco Studio 5.1.0release版本和OpenHarmony SDK API18。

說明：SDK已嵌入DevEco Studio中，無需額外下載配置，新的IDE安裝完成后，新建一個helloworld工程檢測環境是否OK。

3.下載燒錄鏡像和燒錄工具。請參考鏈接：

https://gitee.com/openharmony/docs/blob/master/zh-cn/release-notes/OpenHarmony-v5.1.0-release.md

4.燒錄開發板，請參考鏈接：

https://gitee.com/hihope_iot/docs/blob/master/HiHope_DAYU200/docs/%E7%83%A7%E5%BD%95%E6%8C%87%E5%AF%BC%E6%96%87%E6%A1%A3.md

樣例移植

源樣例是使用DevEco Studio 3.1Beta2，基于API9開發，需要移植到DevEco Studio 5.1.0 release，OpenHarmony SDK API18上。在安裝好DevEco Studio后，打開需要遷移的應用工程視頻播放樣例源碼，樣例源碼鏈接：

https://gitcode.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Media/VideoShow

在工程同步過程中會有報錯，需要修改應用工程相關配置文件。

1.打開工程后出現Sync failed，點擊Migrate Assistant，如圖：

a) 選擇5.1.0，再點擊Migrate。

b) 彈出提示框，點擊Migrate。

c) 再次提示Sync failed，修改build-profile.json文件。

2.修改工程目錄下build-profile.json文件。

a) 修改完之后點擊Try Again 進行同步

b) 同步完成截圖如下所示，此時就可以進行工程編譯。

3.點擊編譯按鈕進行編譯，出現如下報錯，根據報錯提示修改module.json。

a) 打開文件將鼠標放置在報錯處，會出現修改提示，如圖提示刪除uiSyntax字段。

b) 將srcEntrance改為srcEntry，icon字段中內容修改為layered_image.json,并在資源文件夾下添加layered_image.json、backgroud.png、foreground.png文件，這些文件可以在新建工程中獲取，修改完成后點擊Sync Now。

4.代碼報錯修改，如下是幾個典型的報錯解決方案。

a) arkts-no-ctor-prop-decls錯誤。

報錯代碼示例：

class Person {

constructor(readonly name: string) {}

getName(): string {

return this.name;

}

}

應修改為：

class Person {

name: string

constructor(name: string) {

this.name = name;

}

getName(): string {

return this.name;

}

}

b) arkts-no-any-unknown錯誤，需要按照業務邏輯，將代碼中的any, unknown改為具體的類型。

報錯代碼示例：

functionprintObj(obj: any) {

console.log(obj);

}

printObj('abc');

應修改為：

functionprintObj(obj: string) {

console.log(obj);

}

printObj('abc');

c) arkts-no-var錯誤，需要將var改為let。

d) arkts-no-props-by-index錯誤。

報錯代碼示例：

import{ router }from'@kit.ArkUI';

letparams:Object= router.getParams();

letfunNum:number= params['funNum'];

lettarget:string= params['target'];

應修改為：

import{ router }from'@kit.ArkUI';

letparams = router.getParams()asRecord;

letfunNum:number= params.funNumasnumber;

lettarget:string= params.targetasstring;

Video組件介紹

媒體視頻播放是該組件從API version 7開始支持，提供簡單的視頻播放、播控功能，復雜開發場景推薦使用AVPlayer播控API和XComponent組件開發，本樣例中Video組件播放視頻的代碼如下： 詳細介紹請查看開源鴻蒙官網Video組件。

Video({

src: this.videoSrc,

controller: this.detailVideoController

})
.width('100%')
.backgroundColor(this.isHidden ? '#ffffff' : '#000000')
.aspectRatio(1.12)
.controls(this.controls)
.objectFit(ImageFit.Contain)
.onUpdate((e) => {
this.updateTime = e.time
})
.onPrepared((e) => {

console.info('onPrepared:' + e.duration)
})
.onFinish(() => {
this.isHidden = true;
this.isStart = false;
this.updateTime = 0;
})

結語

以上是本次樣例開發移植的分享，主要包括開發環境搭建、開發移植的步驟和編譯問題解決，可以讓初學者掌握開發開源鴻蒙應用的環境搭建和基本組件等知識，也讓有基礎的開發者了解到ArkTS語法規則下將TS代碼適配成ArkTS代碼的適配方法。最后，歡迎更多的開發者加入到開源鴻蒙應用開發中來。