拆·應(yīng)用

【拆·應(yīng)用】是為開(kāi)源鴻蒙應(yīng)用開(kāi)發(fā)者打造的技術(shù)分享平臺(tái)，匯聚開(kāi)發(fā)者的技術(shù)洞見(jiàn)與實(shí)踐經(jīng)驗(yàn)，提供開(kāi)發(fā)心得與創(chuàng)新成果的展示窗口。誠(chéng)邀您踴躍發(fā)聲，期待您的真知灼見(jiàn)與技術(shù)火花！

樣例簡(jiǎn)介

在開(kāi)源鴻蒙生態(tài)建設(shè)中，多媒體能力是構(gòu)建豐富用戶(hù)體驗(yàn)的核心要素。本開(kāi)發(fā)樣例針對(duì)視頻播放場(chǎng)景，聚焦開(kāi)源鴻蒙原生媒體框架，通過(guò)Video組件實(shí)現(xiàn)視頻資源加載、播放狀態(tài)控制及多樣化展示形態(tài)。重點(diǎn)演示組件化播放器封裝、全屏/窗口化動(dòng)態(tài)切換、上下滑動(dòng)輪播等關(guān)鍵技術(shù)方案，為開(kāi)發(fā)者提供標(biāo)準(zhǔn)化視頻功能實(shí)現(xiàn)路徑，助力構(gòu)建高性能、可定制的多媒體應(yīng)用。

使用說(shuō)明

啟動(dòng)播放：首頁(yè)點(diǎn)擊播放按鈕，視頻開(kāi)始播放；再次點(diǎn)擊畫(huà)面進(jìn)入全屏模式

窗口化切換：在首頁(yè)向下滑500vp后，視頻自動(dòng)切換為懸浮小窗模式

輪播體驗(yàn)：點(diǎn)擊底部導(dǎo)航欄"直播"入口，上下滑動(dòng)瀏覽推薦視頻流

開(kāi)發(fā)環(huán)境準(zhǔn)備

下載與安裝DevEco Studio

1.前往下載中心，登錄華為賬號(hào)后下載DevEco Studio，并根據(jù)下載中心頁(yè)面工具完整性指導(dǎo)進(jìn)行完整性校驗(yàn)。

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

說(shuō)明：SDK已嵌入DevEco Studio中，無(wú)需額外下載配置，新的IDE安裝完成后，新建一個(gè)helloworld工程檢測(cè)環(huán)境是否OK。

3.下載燒錄鏡像和燒錄工具。請(qǐng)參考鏈接：

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

4.燒錄開(kāi)發(fā)板，請(qǐng)參考鏈接：

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開(kāi)發(fā)，需要移植到DevEco Studio 5.1.0 release，OpenHarmony SDK API18上。在安裝好DevEco Studio后，打開(kāi)需要遷移的應(yīng)用工程視頻播放樣例源碼，樣例源碼鏈接：

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

在工程同步過(guò)程中會(huì)有報(bào)錯(cuò)，需要修改應(yīng)用工程相關(guān)配置文件。

1.打開(kāi)工程后出現(xiàn)Sync failed，點(diǎn)擊Migrate Assistant，如圖：

a) 選擇5.1.0，再點(diǎn)擊Migrate。

b) 彈出提示框，點(diǎn)擊Migrate。

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

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

a) 修改完之后點(diǎn)擊Try Again 進(jìn)行同步

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

3.點(diǎn)擊編譯按鈕進(jìn)行編譯，出現(xiàn)如下報(bào)錯(cuò)，根據(jù)報(bào)錯(cuò)提示修改module.json。

a) 打開(kāi)文件將鼠標(biāo)放置在報(bào)錯(cuò)處，會(huì)出現(xiàn)修改提示，如圖提示刪除uiSyntax字段。

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

4.代碼報(bào)錯(cuò)修改，如下是幾個(gè)典型的報(bào)錯(cuò)解決方案。

a) arkts-no-ctor-prop-decls錯(cuò)誤。

報(bào)錯(cuò)代碼示例：

class Person {

constructor(readonly name: string) {}

getName(): string {

return this.name;

}

}

應(yīng)修改為：

class Person {

name: string

constructor(name: string) {

this.name = name;

}

getName(): string {

return this.name;

}

}

b) arkts-no-any-unknown錯(cuò)誤，需要按照業(yè)務(wù)邏輯，將代碼中的any, unknown改為具體的類(lèi)型。

報(bào)錯(cuò)代碼示例：

functionprintObj(obj: any) {

console.log(obj);

}

printObj('abc');

應(yīng)修改為：

functionprintObj(obj: string) {

console.log(obj);

}

printObj('abc');

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

d) arkts-no-props-by-index錯(cuò)誤。

報(bào)錯(cuò)代碼示例：

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

letparams:Object= router.getParams();

letfunNum:number= params['funNum'];

lettarget:string= params['target'];

應(yīng)修改為：

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

letparams = router.getParams()asRecord;

letfunNum:number= params.funNumasnumber;

lettarget:string= params.targetasstring;

Video組件介紹

媒體視頻播放是該組件從API version 7開(kāi)始支持，提供簡(jiǎn)單的視頻播放、播控功能，復(fù)雜開(kāi)發(fā)場(chǎng)景推薦使用AVPlayer播控API和XComponent組件開(kāi)發(fā)，本樣例中Video組件播放視頻的代碼如下： 詳細(xì)介紹請(qǐng)查看開(kāi)源鴻蒙官網(wǎng)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;
})

結(jié)語(yǔ)

以上是本次樣例開(kāi)發(fā)移植的分享，主要包括開(kāi)發(fā)環(huán)境搭建、開(kāi)發(fā)移植的步驟和編譯問(wèn)題解決，可以讓初學(xué)者掌握開(kāi)發(fā)開(kāi)源鴻蒙應(yīng)用的環(huán)境搭建和基本組件等知識(shí)，也讓有基礎(chǔ)的開(kāi)發(fā)者了解到ArkTS語(yǔ)法規(guī)則下將TS代碼適配成ArkTS代碼的適配方法。最后，歡迎更多的開(kāi)發(fā)者加入到開(kāi)源鴻蒙應(yīng)用開(kāi)發(fā)中來(lái)。