HarmonyOS開發案例：【視頻播放器】
介紹
使用ArkTS語言實現視頻播放器，主要包括主頁面和視頻播放頁面，我們將一起完成以下功能：
- 獲取本地視頻和網絡視頻。
- 通過AVPlayer進行視頻播放。
- 通過手勢調節屏幕亮度和視頻播放音量。
相關概念
- [AVPlayer]：播放管理類，用于管理和播放媒體資源。
- [XComponent]：可用于EGL/OpenGLES和媒體數據寫入，并顯示在XComponent組件。
- [PanGesture]手勢：用于觸發拖動手勢事件，滑動的最小距離為5vp時拖動手勢識別成功。
相關權限
本篇Codelab使用了網絡連接，需要在配置文件module.json5文件里添加權限：ohos.permission.INTERNET。
環境搭建
軟件要求
- [DevEco Studio]版本：DevEco Studio 3.1 Release。
- OpenHarmony SDK版本：API version 9。
硬件要求
- 開發板類型：[潤和RK3568開發板]。
- OpenHarmony系統：3.2 Release。
環境搭建
完成本篇Codelab我們首先要完成開發環境的搭建，本示例以RK3568開發板為例，參照以下步驟進行：
- [獲取OpenHarmony系統版本]：標準系統解決方案（二進制）。以3.2 Release版本為例：
- 搭建燒錄環境。
- [完成DevEco Device Tool的安裝]
- [完成RK3568開發板的燒錄]
- 搭建開發環境。
代碼結構解讀
本篇Codelab只對核心代碼進行講解，對于完整代碼，我們會在gitee中提供。
HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿
├──entry/src/main/ets // 代碼區
│ ├──common
│ │ ├──constants
│ │ │ ├──CommonConstants.ets // 公共常量類
│ │ │ ├──HomeConstants.ets // 首頁常量類
│ │ │ └──PlayConstants.ets // 視頻播放頁面常量類
│ │ ├──model
│ │ │ ├──HomeTabModel.ets // 首頁參數模型
│ │ │ └──PlayerModel.ets // 播放參數模型
│ │ └──util
│ │ ├──DateFormatUtil.ets // 日期工具類
│ │ ├──GlobalContext.ets // 全局工具類
│ │ ├──Logger.ets // 日志工具類
│ │ └──ScreenUtil.ets // 屏幕工具類
│ ├──controller
│ │ └──VideoController.ets // 視頻控制類
│ ├──entryability
│ │ └──EntryAbility.ts // 程序入口類
│ ├──pages
│ │ ├──HomePage.ets // 首頁頁面
│ │ └──PlayPage.ets // 視頻播放頁面
│ ├──view
│ │ ├──HomeTabContent.ets // 首頁Tab頁面
│ │ ├──HomeTabContentButton.ets // 首頁按鈕子組件
│ │ ├──HomeTabContentDialog.ets // 添加網絡視頻彈框子組件
│ │ ├──HomeTabContentList.ets // 視頻列表子組件
│ │ ├──HomeTabContentListItem.ets // 視頻對象子組件
│ │ ├──PlayControl.ets // 播放控制子組件
│ │ ├──PlayPlayer.ets // 視頻播放子組件
│ │ ├──PlayProgress.ets // 播放進度子組件
│ │ ├──PlayTitle.ets // 播放標題子組件
│ │ └──PlayTitleDialog.ets // 播放速度設置子組件
│ └──viewmodel
│ ├──HomeDialogModel.ets // 添加網絡視頻彈框類
│ ├──HomeVideoListModel.ets // 獲取視頻列表數據類
│ ├──VideoItem.ets // 視頻對象
│ └──VideoSpeed.ets // 播放速度類
└──entry/src/main/resource // 應用靜態資源目錄
獲取視頻
視頻來源主要有本地視和網絡視頻兩種方式，效果如圖所示：
獲取本地視頻，通過resourceManager.getRawFd方法獲取rawfile文件夾中的視頻資源文件描述符，構造本地視頻對象。
// HomeVideoListModel.ets
// 獲取本地視頻
async getLocalVideo() {
this.videoLocalList = [];
await this.assemblingVideoBean();
GlobalContext.getContext().setObject('videoLocalList', this.videoLocalList);
return this.videoLocalList;
}
// HomeVideoListModel.ets
// 組裝本地視頻對象
async assemblingVideoBean() {
VIDEO_DATA.forEach(async (item: VideoItem) = > {
let videoBean = await getContext().resourceManager.getRawFd(item.iSrc);
let uri = videoBean;
this.videoLocalList.push(new VideoItem(item.name, uri, ''));
});
}
網絡視頻是通過手動輸入地址，在有網的環境下點擊“鏈接校驗”，通過地址獲取視頻時長，當視頻時長小于等于零時彈出“鏈接校驗失敗”提示，否則彈出“鏈接校驗成功”提示。
// HomeDialogModel.ets
// 設置網絡視頻路徑
async checkSrcValidity(checkFlag: number) {
if (this.isLoading) {
return;
}
this.isLoading = true;
this.homeTabModel.linkCheck = $r('app.string.link_checking');
this.homeTabModel.loadColor = $r('app.color.index_tab_unselected_font_color');
this.checkFlag = checkFlag;
this.createAvPlayer();
}
// 校驗鏈接有效性
checkUrlValidity() {
this.isLoading = false;
this.homeTabModel.linkCheck = $r('app.string.link_check');
this.homeTabModel.loadColor = $r('app.color.index_tab_selected_font_color');
if (this.avPlayer !== null) {
this.avPlayer.release();
}
if (this.duration === HomeConstants.DURATION_TWO) {
// Failed to verify the link
this.showPrompt($r('app.string.link_check_fail'));
} else if (this.duration === HomeConstants.DURATION_ONE) {
// The address is incorrect or no network is available
this.showPrompt($r('app.string.link_check_address_internet'));
} else {
this.duration = 0;
if (this.checkFlag === 0) {
this.showPrompt($r('app.string.link_check_success'));
} else {
this.homeTabModel!.confirm();
this.homeTabModel!.controller!.close();
}
}
}
視頻播放
視頻播放主要包括視頻的暫停、播放、切換、倍速播放、拖動進度條設置當前進度、顯示當前播放時間、音量調節等功能，本章節主要針對播放管理類（下面簡稱：AVPlayer）進行講解，具體細節請參考gitee源碼，效果如圖所示：
播放的全流程包含：創建AVPlayer，設置播放資源，設置播放參數（音量/倍速），播放控制（播放/暫停/上一個視頻/下一個視頻），重置，銷毀資源。狀態機變化如圖所示：
視頻播放之前需要初始化XComponent組件用于展示視頻畫面。XComponent組件初始化成功之后在onLoad()中獲取surfaceID用于與AVPlayer實例關聯。
// PlayPlayer.ets
XComponent({
...
controller: this.xComponentController
})
.onLoad(async () = > {
...
this.surfaceID = this.xComponentController.getXComponentSurfaceId();
...
})
...
使用AVPlayer前需要通過createAVPlayer()構建一個實例對象，并為AVPlayer實例綁定狀態機，狀態機具體請參考[AVPlayerState]
// VideoController.ets
async createAVPlayer() {
let avPlayer: media.AVPlayer = await media.createAVPlayer();
this.avPlayer = avPlayer;
this.bindState();
}
// VideoController.ets
async bindState() {
if (this.avPlayer === null) {
return;
}
this.avPlayer.on(Events.STATE_CHANGE, async (state: media.AVPlayerState) = > {
let avplayerStatus: string = state;
if (this.avPlayer === null) {
return;
}
switch (avplayerStatus) {
case AvplayerStatus.IDLE:
...
case AvplayerStatus.INITIALIZED:
...
case AvplayerStatus.PREPARED:
...
case AvplayerStatus.PLAYING:
...
case AvplayerStatus.PAUSED:
...
case AvplayerStatus.COMPLETED:
...
case AvplayerStatus.RELEASED:
...
default:
...
}
});
this.avPlayer.on(Events.TIME_UPDATE, (time: number) = > {
this.initProgress(time);
});
this.avPlayer.on(Events.ERROR, () = > {
this.playError();
})
}
AVPlayer實例需設置播放路徑和XComponent中獲取的surfaceID，設置播放路徑之后AVPlayer狀態機變為initialized狀態，在此狀態下調用prepare()，進入prepared狀態。
// VideoController.ets
async firstPlay(index: number, url: resourceManager.RawFileDescriptor, iUrl: string, surfaceId: string) {
this.index = index;
this.url = url;
this.iUrl = iUrl;
this.surfaceId = surfaceId;
if (this.avPlayer === null) {
await this.createAVPlayer();
}
if (this.avPlayer !== null) {
if (this.iUrl) {
this.avPlayer.url = this.iUrl;
} else {
this.avPlayer.fdSrc = this.url;
}
}
}
// VideoController.ets
async bindState() {
...
this.avPlayer.on(Events.STATE_CHANGE, async (state: media.AVPlayerState) = > {
let avplayerStatus: string = state;
if (this.avPlayer === null) {
return;
}
switch (avplayerStatus) {
case AvplayerStatus.IDLE:
...
case AvplayerStatus.INITIALIZED:
this.avPlayer.surfaceId = this.surfaceId;
this.avPlayer.prepare();
break;
...
}
});
...
}
在prepared狀態下可獲取當前播放路徑對應視頻的總時長，并執行play()進行視頻播放。
// VideoController.ets
async bindState() {
...
this.avPlayer.on(Events.STATE_CHANGE, async (state: media.AVPlayerState) = > {
...
switch (avplayerStatus) {
...
case AvplayerStatus.PREPARED:
this.avPlayer.videoScaleType = 0;
this.setVideoSize();
this.avPlayer.play();
this.duration = this.avPlayer.duration;
break;
...
}
});
...
}
視頻播放后，變為playing狀態，可通過“播放/暫停”按鈕切換播放狀態，當視頻暫停時狀態機變為paused狀態。
// VideoController.ets
switchPlayOrPause() {
if (this.avPlayer === null) {
return;
}
if (this.status === CommonConstants.STATUS_START) {
this.avPlayer.pause();
} else {
this.avPlayer.play();
}
}
// VideoController.ets
async bindState() {
...
this.avPlayer.on(Events.STATE_CHANGE, async (state: media.AVPlayerState) = > {
...
switch (avplayerStatus) {
...
case AvplayerStatus.PLAYING:
this.avPlayer.setVolume(this.playerModel.volume);
this.setBright();
this.status = CommonConstants.STATUS_START;
this.watchStatus();
break;
...
}
});
...
}
可拖動進度條設置視頻播放位置，也可滑動音量調節區域設置視頻播放音量、設置播放速度。
// VideoController.ets
// 設置當前播放位置
setSeekTime(value: number, mode: SliderChangeMode) {
if (mode === Number(SliderMode.MOVING)) {
this.playerModel.progressVal = value;
this.playerModel.currentTime = DateFormatUtil.secondToTime(Math.floor(value * this.duration /
CommonConstants.ONE_HUNDRED / CommonConstants.A_THOUSAND));
}
if (mode === Number(SliderMode.END) || mode === Number(SliderMode.CLICK)) {
this.seekTime = value * this.duration / CommonConstants.ONE_HUNDRED;
if (this.avPlayer !== null) {
this.avPlayer.seek(this.seekTime, media.SeekMode.SEEK_PREV_SYNC);
}
}
}
// VideoController.ets
// 設置播放音量
onVolumeActionUpdate(event?: GestureEvent) {
if (!event) {
return;
}
if (this.avPlayer === null) {
return;
}
if (CommonConstants.OPERATE_STATE.indexOf(this.avPlayer.state) === -1) {
return;
}
if (this.playerModel.brightShow === false) {
this.playerModel.volumeShow = true;
let screenWidth = GlobalContext.getContext().getObject('screenWidth') as number;
let changeVolume = (event.offsetX - this.positionX) / screenWidth;
let volume: number = this.playerModel.volume;
let currentVolume = volume + changeVolume;
let volumeMinFlag = currentVolume <= PlayConstants.MIN_VALUE;
let volumeMaxFlag = currentVolume > PlayConstants.MAX_VALUE;
this.playerModel.volume = volumeMinFlag ? PlayConstants.MIN_VALUE :
(volumeMaxFlag ? PlayConstants.MAX_VALUE : currentVolume);
this.avPlayer.setVolume(this.playerModel.volume);
this.positionX = event.offsetX;
}
}
// VideoController.ets
// 設置播放速度
setSpeed(playSpeed: number) {
if (this.avPlayer === null) {
return;
}
if (CommonConstants.OPERATE_STATE.indexOf(this.avPlayer.state) === -1) {
return;
}
this.playerModel.playSpeed = playSpeed;
this.avPlayer.setSpeed(this.playerModel.playSpeed);
}
視頻播放完成之后，進入completed狀態，需調用reset()對視頻進行重置，此時變為idle轉態，在idle狀態下設置下一個視頻的播放地址，又會進入initialized狀態。
// VideoController.ets
sync bindState() {
...
this.avPlayer.on(Events.STATE_CHANGE, async (state: media.AVPlayerState) = > {
let avplayerStatus: string = state;
...
switch (avplayerStatus) {
case AvplayerStatus.IDLE:
this.resetProgress();
if (this.iUrl) {
this.avPlayer.url = this.iUrl;
} else {
this.avPlayer.fdSrc = this.url;
}
break;
case AvplayerStatus.INITIALIZED:
this.avPlayer.surfaceId = this.surfaceId;
this.avPlayer.prepare();
break;
...
case AvplayerStatus.COMPLETED:
...
this.avPlayer.reset();
break;
...
}
});
...
}
手勢控制
播放頁面通過綁定平移手勢（PanGesture），上下滑動調節屏幕亮度，左右滑動調節視頻音量，效果如圖所示：
// PlayPage.ets
Column() {
...
Column()
...
.gesture(
PanGesture(this.panOptionBright)
.onActionStart((event?: GestureEvent) = > {
this.playVideoModel.onBrightActionStart(event);
})
.onActionUpdate((event?: GestureEvent) = > {
this.playVideoModel.onBrightActionUpdate(event);
})
.onActionEnd(() = > {
this.playVideoModel.onActionEnd();
})
)
...
Column()
...
.gesture(
PanGesture(this.panOptionVolume)
.onActionStart((event?: GestureEvent) = > {
this.playVideoModel.onVolumeActionStart(event);
})
.onActionUpdate((event?: GestureEvent) = > {
this.playVideoModel.onVolumeActionUpdate(event);
})
.onActionEnd(() = > {
this.playVideoModel.onActionEnd();
})
)
...
}
...
本章節以音量調節介紹手勢控制，當手指觸摸音量調節區域時獲取當前屏幕坐標，滑動手指實時獲取屏幕坐標并計算音量。
// VideoController.ets
// 手指觸摸到音量調節區域
onVolumeActionStart(event?: GestureEvent) {
if (!event) {
return;
}
this.positionX = event.offsetX;
}
// 手指在音量調節區域水平滑動
onVolumeActionUpdate(event?: GestureEvent) {
if (!event) {
return;
}
if (this.avPlayer === null) {
return;
}
if (CommonConstants.OPERATE_STATE.indexOf(this.avPlayer.state) === -1) {
return;
}
if (this.playerModel.brightShow === false) {
this.playerModel.volumeShow = true;
let screenWidth = GlobalContext.getContext().getObject('screenWidth') as number;
let changeVolume = (event.offsetX - this.positionX) / screenWidth;
let volume: number = this.playerModel.volume;
let currentVolume = volume + changeVolume;
let volumeMinFlag = currentVolume <= PlayConstants.MIN_VALUE;
let volumeMaxFlag = currentVolume > PlayConstants.MAX_VALUE;
this.playerModel.volume = volumeMinFlag ? PlayConstants.MIN_VALUE :
(volumeMaxFlag ? PlayConstants.MAX_VALUE : currentVolume);
this.avPlayer.setVolume(this.playerModel.volume);
this.positionX = event.offsetX;
}
}
審核編輯 黃宇
聲明：本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人，不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用，如有內容侵權或者其他違規問題，請聯系本站處理。
舉報投訴
-
鴻蒙
+關注
關注
59文章
2535瀏覽量
43808 -
HarmonyOS
+關注
關注
80文章
2084瀏覽量
32237 -
OpenHarmony
+關注
關注
28文章
3836瀏覽量
18220
發布評論請先 登錄
相關推薦
熱點推薦
在(Linux)ubuntu下通過GTK調用libvlc開發視頻播放器
本項目實現了一個基于GTK和libvlc的視頻播放器。使用GTK創建GUI界面，使用libvlc播放視頻。用戶可以通過選擇視頻文件，然后啟動
靈活電影播放器視頻/音頻播放軟件
東京，2008年4月24日--瑞薩科技公司（Renesas Techno logy Corp.）今天宣布，推出為采用移動電話SH-Mobile*1應用處理器的嵌入式系統開發的靈活電影播放器
發表于 03-06 19:52
HarmonyOS應用開發-視頻播放
了HarmonyOS應用開發E2E體驗，學到了：如何創建一個HarmonyOS Demo Project如何構建一個Hap并且將其部署到真機在HarmonyOS上如何使用
發表于 09-11 17:25
基于HarmonyOS ets開發的簡易視頻播放器
這是我們使用HarmonyOS的codelab簡易視頻播放器的codelab簡易播放器。內容就是一個主視頻界面，包括頂部的
發表于 04-18 10:41
flv視頻播放器代碼
flv視頻播放器代碼
FlV視頻播放器代碼
代碼如下這里只是介紹幾個例子，現在把代碼公布一下，大家可以參考著做，也可以把你喜歡的視頻連接
發表于 01-10 12:36
?2151次閱讀
工商網監
評論