鴻蒙Next媒體展示組件實戰：Video與動態布局全解析

今天我們來深入探討HarmonyOS Next中幾種核心媒體展示組件的使用方法，通過實際代碼示例展示如何打造豐富的多媒體體驗。

HarmonyOS Next為開發者提供了一套強大而靈活的媒體展示組件，使開發者能夠輕松實現視頻播放、動態布局適應、全屏切換等常見多媒體功能。無論是構建短視頻應用、視頻直播平臺還是內容豐富的媒體瀏覽應用，這些組件都能提供強有力的支持。

本文將重點介紹Video組件、AVPlayer與XComponent的結合使用，以及如何通過媒體查詢實現動態布局，幫助開發者快速掌握鴻蒙Next媒體開發的核心技能。

1. Video組件基礎使用

Video組件是鴻蒙多媒體系統中最常用的組件之一，它提供了開箱即用的視頻播放功能8。

1.1 基本參數配置

創建一個基礎Video組件非常簡單，以下是一個基本示例：

typescript

// Video基礎使用示例
Video({src: $rawfile('video.mp4'), // 視頻資源路徑，支持本地和網絡路徑previewUri: $r('app.media.preview'), // 未播放時的預覽圖片controller: this.videoController // 視頻控制器
})
.width('100%')
.aspectRatio(1.78) // 設置寬高比
.controls(true) // 顯示控制欄
.autoPlay(false) // 不自動播放
.loop(false) // 不循環播放
.objectFit(ImageFit.Cover) // 視頻顯示模式
.onPrepared((event) => {console.info('視頻準備完成，時長：' + event.duration + '秒');
})
.onUpdate((event) => {console.info('當前播放進度：' + event.time);
})
.onFinish(() => {console.info('視頻播放結束');
})

Video組件支持多種參數配置：8

src: 視頻源，支持本地路徑（如$rawfile('video.mp4')）和網絡URL
previewUri: 視頻未播放時顯示的預覽圖
controller: 視頻控制器，用于控制播放、暫停等操作
currentProgressRate: 播放倍速，支持0.75、1.0、1.25、1.75、2.0

1.2 視頻控制功能

通過VideoController可以實現對視頻的精確控制：8

typescript

// 創建VideoController
private videoController: VideoController = new VideoController();// 在build方法中使用
Video({src: this.videoSrc,controller: this.videoController
})// 播放控制方法
playVideo() {this.videoController.start();
}pauseVideo() {this.videoController.pause();
}stopVideo() {this.videoController.stop();
}seekTo(position: number) {this.videoController.seekTo(position);
}

2. 全屏切換功能實現

全屏切換是視頻應用中的常見需求，鴻蒙Next提供了多種實現方式。

2.1 使用Video組件內置全屏功能

Video組件提供了onFullscreenChange回調，可以輕松實現全屏切換：6

typescript

Video({src: this.videoSrc,controller: this.videoController
})
.onFullscreenChange((event) => {// 橫豎屏切換this.windowChange(event.fullscreen);
})// 全屏切換方法
windowChange(isFullscreen: boolean) {let context = getContext(this);window.getLastWindow(context).then((lastWindow) => {if (isFullscreen) {// 設置全屏lastWindow.setPreferredOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE);lastWindow.setWindowSystemBarEnable([]); // 隱藏系統欄} else {// 退出全屏lastWindow.setPreferredOrientation(window.Orientation.PORTRAIT);lastWindow.setWindowSystemBarEnable(['status', 'navigation']); // 顯示系統欄}});
}

2.2 使用AVPlayer和XComponent實現高級全屏功能

對于需要更自定義控制的場景，可以使用AVPlayer和XComponent組合：5

typescript

// 初始化AVPlayer
async initAVPlayer() {await this.release();const context = getContext(this);// 獲取資源文件描述符context.resourceManager.getRawFd(this.fileName).then(async (value) => {this.avPlayer = await media.createAVPlayer();this.avPlayer.fdSrc = {fd: value.fd,offset: value.offset,length: value.length};// 設置surfaceIdthis.setSurfaceID();});
}// 將XComponent與AVPlayer綁定
setSurfaceID() {this.avPlayer.surfaceId = this.surfaceID;
}// 全屏切換動畫
toggleFullScreen() {animateTo({duration: 300,onFinish: () => {this.isLandscape = !this.isLandscape;this.changeOrientation();}}, () => {this.isFullScreen = !this.isFullScreen;});
}// 改變屏幕方向
changeOrientation() {let context = getContext(this);window.getLastWindow(context).then((lastWindow) => {if (this.isLandscape) {// 橫屏模式lastWindow.setWindowLayoutFullScreen(true, () => {lastWindow.setWindowSystemBarEnable([]);lastWindow.setPreferredOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE);});} else {// 豎屏模式lastWindow.setPreferredOrientation(window.Orientation.UNSPECIFIED, () => {lastWindow.setWindowSystemBarEnable(['status', 'navigation'], () => {lastWindow.setWindowLayoutFullScreen(false);});});}});
}

3. 小窗口播放模式

小窗口播放是現代視頻應用的重要特性，允許用戶在瀏覽其他內容時繼續觀看視頻13。

typescript

// 小窗口播放組件
@Component
struct SmallVideoComponent {private controller: VideoController;private currentTime: number = 0;build() {Column() {Video({src: $rawfile('video.mp4'),controller: this.controller}).width(200).height(120).controls(false).objectFit(ImageFit.Cover).onUpdate((event) => {this.currentTime = event.time;})}.onClick(() => {// 點擊小窗口切換回全屏this.switchToFullScreen();})}
}// 在主頁中實現滾動時切換小窗口
@Entry@Component
struct MainPage {private scroller: Scroller = new Scroller();@State isSmallWindow: boolean = false;build() {Scroll(this.scroller) {Column() {// 主內容區域if (!this.isSmallWindow) {VideoPlayerComponent()}// 其他內容ForEach(this.contentList, (item) => {ContentItem(item)})}.onScroll(() => {// 滾動超過500vp時切換為小窗口if (this.scroller.currentOffset().yOffset > 500 && !this.isSmallWindow) {this.isSmallWindow = true;} else if (this.scroller.currentOffset().yOffset <= 500 && this.isSmallWindow) {this.isSmallWindow = false;}})}// 顯示小窗口if (this.isSmallWindow) {SmallVideoComponent().position({x: 20, y: 20})}}
}

4. 基于媒體查詢的動態布局

鴻蒙的媒體查詢模塊允許根據設備特性動態調整布局，提供響應式體驗2。

typescript

import mediaquery from '@ohos.mediaquery';// 創建媒體查詢監聽器
let resolutionListener = mediaquery.matchMediaSync('(resolution > 2dppx)');
let orientationListener = mediaquery.matchMediaSync('(orientation: landscape)');// 根據設備分辨率調整布局
resolutionListener.on('change', (mediaQueryResult) => {if (mediaQueryResult.matches) {// 高分辨率設備布局this.videoWidth = '100%';this.videoHeight = 360;this.controlsSize = 24;} else {// 低分辨率設備布局this.videoWidth = '100%';this.videoHeight = 240;this.controlsSize = 20;}
});// 根據屏幕方向調整布局
orientationListener.on('change', (mediaQueryResult) => {if (mediaQueryResult.matches) {// 橫屏布局this.isLandscape = true;this.videoWidth = '100%';this.videoHeight = '100%';} else {// 豎屏布局this.isLandscape = false;this.videoWidth = '100%';this.videoHeight = 300;}
});// 在組件中使用響應式變量
Video({src: this.videoSrc,controller: this.videoController
})
.width(this.videoWidth)
.height(this.videoHeight)
.controls(true)

5. 直播流媒體實現

鴻蒙Next同樣支持直播流媒體播放，以下是實現直播功能的關鍵代碼13：

typescript

// 直播頁面組件
@Component
struct LivePage {private liveController: VideoController = new VideoController();@State currentLive: LiveDataModel = null;@State liveList: LiveDataModel[] = [];aboutToAppear() {// 獲取直播數據this.getLiveData();}// 獲取直播數據async getLiveData() {try {this.liveList = await LiveUtils.getLiveList();if (this.liveList.length > 0) {this.currentLive = this.liveList[0];}} catch (error) {console.error('獲取直播數據失敗: ' + JSON.stringify(error));}}build() {Swiper() {ForEach(this.liveList, (liveItem) => {Column() {Video({src: liveItem.streamUrl,controller: this.liveController}).width('100%').height('100%').objectFit(ImageFit.Cover).controls(true).loop(true)// 直播疊加信息LiveOverlay(liveItem)}})}.index(this.currentIndex).autoPlay(false).indicator(false).vertical(true).onChange((index) => {// 切換直播流this.liveController.stop();this.currentLive = this.liveList[index];this.liveController.start();})}
}

6. 性能優化技巧

在媒體應用開發中，性能優化至關重要56。

6.1 使用LazyForEach懶加載

typescript

// 使用LazyForEach優化長列表性能
LazyForEach(this.liveDataSource, (liveItem: LiveDataModel) => {LiveItemComponent({ liveItem: liveItem })
}, (liveItem: LiveDataModel) => liveItem.id.toString())

6.2 組件復用優化

typescript

// 使用@Reusable裝飾器實現組件復用
@Reusable
@Component
struct VideoPlayerComponent {@Prop videoItem: VideoItem;build() {Column() {Video({src: this.videoItem.url,previewUri: this.videoItem.thumbnail}).width('100%').height(200)}}
}