基于ArkTS語(yǔ)言的OpenHarmony APP應(yīng)用開發(fā)：多媒體管理2

1、程序介紹

本示例展示了視頻組件的基本功能，以及如何控制播放狀態(tài)的相關(guān)能力。包括視頻組件化，全屏化，窗口化，上下輪播視頻等。

本實(shí)例使用Video組件，具體如下：

進(jìn)入首頁(yè)點(diǎn)擊播放按鍵。

點(diǎn)擊視頻播放按鈕，視頻開始播放。再次點(diǎn)擊視頻進(jìn)入視頻全屏頁(yè)。

首頁(yè)下滑500vp后，視頻小窗口化。

4.點(diǎn)擊直播按鈕進(jìn)入直播頁(yè)，上下滑動(dòng)視頻。

本案例已在OpenHarmony凌蒙派-RK3568開發(fā)板驗(yàn)證通過(guò)

API版本：9

2、知識(shí)準(zhǔn)備

2.1、Video

用于播放視頻文件并控制其播放狀態(tài)的組件。

使用網(wǎng)絡(luò)視頻時(shí)，需要申請(qǐng)權(quán)限ohos.permission.INTERNET。

詳細(xì)請(qǐng)參考：官方文檔

2.1.1、接口

Video(value:{src?:string|Resource,currentProgressRate?:number|string|PlaybackSpeed,previewUri?:string|PixelMap|Resource,controller?:VideoController})

參數(shù)定義如下所示：

其中，PlaybackSpeed定義如下所示：

2.1.2、屬性

除支持通用屬性外，還支持以下屬性：

2.1.3、事件

除支持通用事件外，還支持以下事件：

2.1.4、VideoController

一個(gè)VideoController對(duì)象可以控制一個(gè)或多個(gè)video。

（1）導(dǎo)入對(duì)象

controller: VideoController = new VideoController()

（2）start

start(): void

開始播放。

（3）pause

pause(): void

暫停播放，顯示當(dāng)前幀，再次播放時(shí)從當(dāng)前位置繼續(xù)播放。

（4）stop

stop(): void

停止播放，顯示當(dāng)前幀，再次播放時(shí)從頭開始播放。

2.1.5、exitFullscreen

exitFullscreen()

退出全屏播放。

2.1.6、setCurrentTime

setCurrentTime(value: number)

指定視頻播放的進(jìn)度位置。

其中，參數(shù)定義如下：

3、程序解析

本案例展示了視頻組件的基本功能，以及如何控制播放狀態(tài)的相關(guān)能力。包括視頻組件化，全屏化，窗口化，上下輪播視頻等。

本案例主要分為以下幾個(gè)部分：

（1）MainPage.ets，負(fù)責(zé)主頁(yè)面，通過(guò)調(diào)用其它自定義控件播放視頻；

（2）VideoPage.ets：負(fù)責(zé)上方輪播圖視頻播放和控制；

（3）SmallVideo.ets：負(fù)責(zé)小窗口視頻播放和控制；

（4）LivePage.ets：負(fù)責(zé)顯示直播頁(yè)面；

（5）FullPage.ets：全屏顯示視頻播放頁(yè)面；

3.1、申請(qǐng)權(quán)限

申請(qǐng)網(wǎng)絡(luò)視頻權(quán)限，在entry/src/main/module.json5文件中添加如下內(nèi)容：

"requestPermissions": [ { "name": "ohos.permission.INTERNET" }]

3.2、MainPage.ets

在entry/src/main/ets/pages/Index.ets文件中調(diào)用MainPage自定義組件。

import { MainPage } from "@ohos/video-component"
@Entry@Componentstruct Index { @State message: string = 'Hello World'
build() { Column() { MainPage() } .width('100%') .height('100%') }}

在VideoComponent/src/main/ets/components/pages/MainPage.ets文件中，首先設(shè)置媒體查詢的查詢條件。

listenerIsPhone = mediaQuery.matchMediaSync('(orientation:landscape)');

其次，對(duì)監(jiān)聽句柄進(jìn)行事件綁定。

async aboutToAppear() { this.portraitFunc = this.onPortrait.bind(this) // 綁定 this.listenerIsPhone.on('change', this.portraitFunc)}

再次，通過(guò)調(diào)用VideoPage顯示輪播圖視頻播放。

Swiper() { // 視頻界面，調(diào)用自定義的VideoPage.ets VideoPage({ isStart: $openFirst }) // 模擬Swiper數(shù)據(jù) LazyForEach(new MyDataSource(this.arrSwiper), (item) => { Text(item.toString()) .width('100%') .aspectRatio(1.12) .backgroundColor(0xAFEEEE) .textAlign(TextAlign.Center) .fontSize(20) }, item => item)}

再次，調(diào)用SmallVideo顯示小視頻播放。

Column() { SmallVideo({ isHidden: $isHidden, isCancel: $isCancel })}.width('100%').alignItems(HorizontalAlign.End)

最后，顯示直播視頻按鍵。

Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { Image($r('app.media.broadcast')) .objectFit(ImageFit.Contain) .width('24') .height('24') .margin({ top: 10 }) Text($r("app.string.in_live")) .fontSize(10) .fontColor('#000000') .margin({ top: 5 })}.width(58).height(58).backgroundColor('#FFFFFF').border({ color: 'rgba(0,0,0,0.2)' }).borderRadius(16).borderWidth(1.3).key('directVideo').onClick(() => { router.push({ url: 'pages/LivePage' })}).position({ x: '86%', y: '20%' })}.width('100%').height('100%').backgroundColor(0xDCDCDC)

注意：當(dāng)Flex觸發(fā)鼠標(biāo)按下事件，則通過(guò)router.push()跳轉(zhuǎn)到LivePage.ets頁(yè)面。

3.3、VideoPage.ets

首先，定義播放視頻的資源以及視頻播放控制器。

@State videoSrc: Resource = $rawfile('video_4.mp4') // 視頻播放文件detailVideoController:VideoController=newVideoController() //設(shè)置視頻播放的控制器，比如控制視頻開始，暫停等

其次，調(diào)用Video組件，并將視頻資源和視頻控制器代入。

Video({ src: this.videoSrc, // 設(shè)置視頻文件地址 controller: this.detailVideoController, // 設(shè)置視頻播放的控制器，比如控制視頻開始，暫停等})

最后，通過(guò)video組件的.onClick()響應(yīng)事件，控制視頻播放。

.onClick(() => { // 單擊按鈕事件 if (this.isPlayClick) { // 判斷play按鈕是否用過(guò)，沒(méi)有用過(guò)，進(jìn)入這層 if (this.firstClick) { // 第一次點(diǎn)擊視頻開始播放，再次點(diǎn)擊進(jìn)入全屏 this.detailVideoController.start() // Video開始播放 this.isHidden = !this.isHidden this.isStart = true this.firstClick = !this.firstClick } else { // 頁(yè)面跳轉(zhuǎn) router.push({ url: 'pages/FullPage', params: { videoSrc: this.videoSrc, videoTime: this.updateTime } }) } } else { // 頁(yè)面跳轉(zhuǎn) router.push({ url: 'pages/FullPage', params: { videoSrc: this.videoSrc, videoTime: this.updateTime } }) }})

其中，關(guān)于播放時(shí)間顯示（即變量updateTime）需要特別注意。在此不贅述。

3.4、SmallVideo.ets

SmallVideo自定義組件則負(fù)責(zé)小窗口視頻播放，通過(guò)調(diào)用Video播放視頻文件。

首先，定義視頻資源和視頻控制器。

@State smallVideoSrc: Resource = $rawfile('video_4.mp4') // 視頻數(shù)據(jù)源文件smallVideoController:VideoController=newVideoController() //設(shè)置視頻控制器

其次，將視頻資源和視頻控制器放入Video控件。

Video({ src: this.smallVideoSrc, // 視頻播放源的路徑，支持本地視頻路徑和網(wǎng)絡(luò)路徑 controller: this.smallVideoController // 設(shè)置視頻控制器}) .controls(false) .autoPlay(true) // 設(shè)置自動(dòng)播放 .muted(true) // 設(shè)置靜音 .onFinish(() => { // 播放結(jié)束時(shí)觸發(fā)該事件 this.isHidden = false })

注意：.onFinish()事件是在視頻播放完畢后觸發(fā)。

3.5、LivePage.ets

LivePage.ets負(fù)責(zé)顯示直播頁(yè)面。

首先，定義一個(gè)媒體查詢的監(jiān)聽句柄。

listenerIsPhone = mediaQuery.matchMediaSync('(orientation:landscape)');

其次，在aboutToAppear()中將視頻播放綁定，并通過(guò)http連接請(qǐng)求，獲取網(wǎng)絡(luò)視頻信息。

async aboutToAppear() { this.portraitFunc = this.onPortrait.bind(this) // bind current js instance this.listenerIsPhone.on('change', this.portraitFunc)
try { let a = await Live() // http連接請(qǐng)求 this.mData = JSON.parse(a.result.toString()) this.liveInfoList = this.mData.data } catch (error) { console.log('http resquest is fail:' + error) }}

最后，在build()中顯示網(wǎng)絡(luò)視頻直播。

ForEach(this.liveInfoList, (item, index) => { Stack() { if (this.active == index) { Video({ src: item.uri }) .autoPlay(true) .loop(false) .controls(false) .objectFit(ImageFit.Contain) .width('100%') .height('100%') } ...... } ......}

3.6、FullPage.ets

FullPage.ets負(fù)責(zé)全屏顯示視頻播放頁(yè)面。

首先，定義一個(gè)媒體查詢的監(jiān)聽句柄和視頻控制器。

listenerIsPhone = mediaQuery.matchMediaSync('(orientation:landscape)')fullVideoController:VideoController=newVideoController()

其次，在aboutToAppear()中綁定當(dāng)前用例。

aboutToAppear() { this.fullParams = router.getParams() this.fullSrc = this.fullParams['videoSrc'] this.playTime = this.fullParams['videoTime']
this.portraitFunc = this.onPortrait.bind(this) // bind current js instance this.listenerIsPhone.on('change', this.portraitFunc)}

最后，調(diào)用Video組件控制視頻播放。

Video({ src: this.fullSrc, controller: this.fullVideoController}) .width('100%') .height('100%') .autoPlay(true) .loop(true) .controls(false) .objectFit(ImageFit.Contain) .onPause(() => { this.isHidden = true }) .onFullscreenChange((e) => { this.isHidden = false }) .onStart(() => { this.isHidden = false }) .onPrepared((e) => { this.fullVideoController.setCurrentTime(this.playTime) this.maxValue = e.duration }) .onUpdate((e) => { this.nowValue = e.time }) .onClick(() => { this.fullVideoController.pause(); })

4、項(xiàng)目編譯

4.1、打開項(xiàng)目

打開DevEco Studio，再打開自定義通知項(xiàng)目。

4.2、編譯程序

點(diǎn)擊菜單欄上的“Build” -> "Rebuild Project"。如果出現(xiàn)無(wú)法編譯，則注意查看Event Log界面。如下所示：

點(diǎn)擊Run 'npm install'，讓DevEco Studio安裝相關(guān)依賴包。

重新點(diǎn)擊菜單欄上的“Build” -> "Rebuild Project"。出現(xiàn)如下錯(cuò)誤：

點(diǎn)擊上圖紅色框部分，安裝相關(guān)服務(wù)。

重新點(diǎn)擊菜單欄上的“Build” -> "Rebuild Project"，編譯成功。

4.3、安裝程序

點(diǎn)擊“entry”按鈕，將項(xiàng)目程序安裝到設(shè)備端。如下圖所示：

如果出現(xiàn)下述報(bào)錯(cuò)，表示無(wú)法安裝。如圖所示：

點(diǎn)擊上圖紅色框的藍(lán)色字體，彈出"Project Structure"對(duì)話框，點(diǎn)擊"Apply"，再點(diǎn)擊"OK"。如圖所示：

重新點(diǎn)擊“entry”按鈕，將項(xiàng)目程序安裝到設(shè)備端。