1、程序介紹

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

本實例使用Video組件，具體如下：

進入首頁點擊播放按鍵。

點擊視頻播放按鈕，視頻開始播放。再次點擊視頻進入視頻全屏頁。

首頁下滑500vp后，視頻小窗口化。

4.點擊直播按鈕進入直播頁，上下滑動視頻。

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

API版本：9

2、知識準備

2.1、Video

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

使用網絡視頻時，需要申請權限ohos.permission.INTERNET。

詳細請參考：官方文檔

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

一個VideoController對象可以控制一個或多個video。

（1）導入對象

controller: VideoController = new VideoController()

（2）start

start(): void

開始播放。

（3）pause

pause(): void

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

（4）stop

stop(): void

停止播放，顯示當前幀，再次播放時從頭開始播放。

2.1.5、exitFullscreen

exitFullscreen()

退出全屏播放。

2.1.6、setCurrentTime

setCurrentTime(value: number)

指定視頻播放的進度位置。

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

3、程序解析

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

本案例主要分為以下幾個部分：

（1）MainPage.ets，負責主頁面，通過調用其它自定義控件播放視頻；

（2）VideoPage.ets：負責上方輪播圖視頻播放和控制；

（3）SmallVideo.ets：負責小窗口視頻播放和控制；

（4）LivePage.ets：負責顯示直播頁面；

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

3.1、申請權限

申請網絡視頻權限，在entry/src/main/module.json5文件中添加如下內容：

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

3.2、MainPage.ets

在entry/src/main/ets/pages/Index.ets文件中調用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文件中，首先設置媒體查詢的查詢條件。

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

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

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

再次，通過調用VideoPage顯示輪播圖視頻播放。

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

再次，調用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)

注意：當Flex觸發(fā)鼠標按下事件，則通過router.push()跳轉到LivePage.ets頁面。

3.3、VideoPage.ets

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

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

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

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

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

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

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

3.4、SmallVideo.ets

SmallVideo自定義組件則負責小窗口視頻播放，通過調用Video播放視頻文件。

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

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

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

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

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

3.5、LivePage.ets

LivePage.ets負責顯示直播頁面。

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

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

其次，在aboutToAppear()中將視頻播放綁定，并通過http連接請求，獲取網絡視頻信息。

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

最后，在build()中顯示網絡視頻直播。

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負責全屏顯示視頻播放頁面。

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

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

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

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)}

最后，調用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、項目編譯

4.1、打開項目

打開DevEco Studio，再打開自定義通知項目。

4.2、編譯程序

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

點擊Run 'npm install'，讓DevEco Studio安裝相關依賴包。

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

點擊上圖紅色框部分，安裝相關服務。

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

4.3、安裝程序

點擊“entry”按鈕，將項目程序安裝到設備端。如下圖所示：

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

點擊上圖紅色框的藍色字體，彈出"Project Structure"對話框，點擊"Apply"，再點擊"OK"。如圖所示：

重新點擊“entry”按鈕，將項目程序安裝到設備端。