鸿蒙Next媒体展示组件实战：Video与动态布局全解析

最新推荐文章于 2025-09-01 21:24:37 发布
原创 最新推荐文章于 2025-09-01 21:24:37 发布 · 574 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #媒体 #华为

今天我们来深入探讨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
    };
    
    // 设置surfaceId
    this.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)
    }
  }
}

总结

HarmonyOS Next提供了丰富而强大的媒体展示组件，从简单的Video组件到高级的AVPlayer与XComponent组合，可以满足各种多媒体应用场景的需求。通过本文介绍的几种媒体展示组件的使用方法，开发者可以快速构建功能丰富、性能优异的媒体应用。

关键要点包括：135

  1. Video组件提供了开箱即用的视频播放功能，适合大多数基本场景

  2. AVPlayer与XComponent组合提供了更高级的自定义控制能力

  3. 全屏切换可以通过Video组件内置功能或自定义实现

  4. 小窗口播放增强了用户体验，允许后台播放

  5. 媒体查询实现了响应式布局，适应不同设备特性

  6. 性能优化技术如LazyForEach和@Reusable确保了流畅体验

鸿蒙Next的媒体能力仍在不断发展，建议开发者定期查阅官方文档以获取最新功能和最佳实践。

从零开始的HarmonyOS Next开发指南：打造HarmonyOS NEXT元服务
一键难忘的博客
05-26 9234
DevEco Studio 4.0是一个集成开发环境（IDE），专门为开发者提供一站式的HarmonyOS应用和服务开发支持。以下是DevEco Studio 4.0的一些主要特点：高效智能代码编辑：支持多种语言，如ArkTS、JavaScript、C/C++等，提供代码高亮、智能补齐、错误检查、自动跳转、格式化、查找等功能，以提升代码编写的效率。低代码可视化开发：拥有丰富的UI界面编辑能力，支持自由拖拽组件和可视化数据绑定，能够快速预览效果，所见即所得。
基于HarmonyOS 5.0（NEXT）与SpringCloud架构的跨平台应用开发与服务集成研究【实战】
一键难忘的博客
12-27 2561
DevEco Studio 是一个集成开发环境（IDE），专门为开发者提供一站式的HarmonyOS应用和服务开发支持。以下是DevEco Studio 的一些主要特点：高效智能代码编辑：支持多种语言，如ArkTS、JavaScript、C/C++等，提供代码高亮、智能补齐、错误检查、自动跳转、格式化、查找等功能，以提升代码编写的效率。低代码可视化开发：拥有丰富的UI界面编辑能力，支持自由拖拽组件和可视化数据绑定，能够快速预览效果，所见即所得。同时支持卡片的零代码开发，降低开发门槛和提升界面开发效率。
HarmonyOS NEXT组件深度全解：十大核心组件开发指南与实战
嗨，欢迎来到我的 CSDN 博客小天地！一名深耕多年的技术发烧友。在这里，我将把日常工作中积累的宝贵经验，从复杂架构设计的精妙之处，到代码优化的实战技巧，毫无保留地分享给大家。
02-28 7879
HarmonyOS NEXT组件深度全解：十大核心组件开发指南与实战
137.[HarmonyOS NEXT 实战案例七:List系列] 多列列表组件实战：打造精美应用推荐页 基础篇
全栈若城,专注知识分享
06-29 987
在HarmonyOS NEXT应用开发中，多列列表是一种常见的UI布局方式，特别适合展示网格状的内容，如应用商店、图片库、商品展示等。多列列表可以在有限的屏幕空间内高效地展示更多内容，提升用户体验。这个接口定义了应用的三个属性：名称、图标和下载量。其中图标使用Resource类型，表示资源引用。在本篇教程中，我们学习了如何使用HarmonyOS NEXT的List组件的lanes属性创建多列列表，实现了一个应用推荐页面。
【HarmonyOS实战开发】鸿蒙-自适应布局解析
HarmonyOS007的博客
07-25 1829
这份鸿蒙（HarmonyOS NEXT）文档包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。
第四五课：HarmonyOS Next社交应用开发全解析：功能实现与实战案例
m0_71441912的博客
03-02 976
HarmonyOS Next凭借‌分布式能力‌与‌原生ArkTS语言‌，为社交应用开发提供了从消息通信到数据安全的全链路解决方案。通过模块化架构设计‌6、高性能渲染引擎‌5及多设备协同能力‌3，开发者可快速构建即时通讯、社交平台等创新应用。建议优先采用系统级API（如分布式数据管理、GPU加速）提升性能，并结合分层权限控制保障用户隐私‌12。
鸿蒙(HarmonyOS)应用开发实战——评论组件案例实现
CTrup的博客
09-25 1074
评论组件在目前市面上的短视频app中是一种很常见的场景，本案例使用 全局状态保留能力弹窗 来实现评论组件。点击评论按钮弹出评论组件，点击空白处隐藏该组件，再次点击评论按钮则会恢复上一次浏览的组件状态。
鸿蒙（HarmonyOS）应用开发之性能优化实战-组件复用
CTrup的博客
09-20 1009
3.开发者需要区分好自定义组件的创建和更新过程中的行为，并注意到自定义组件的复用本质上是一种特殊的组件更新行为，组件创建过程中的流程与生命周期将不会在组件复用中发生，自定义组件的构造参数将通过aboutToReuse生命周期回调传递给自定义组件。由于在组件复用的场景下，每次复用都需要重新创建组件关联的数据对象，导致重复执行入参中的函数来获取入参结果。组件的生命周期回调，在可复用组件从复用缓存中加入到组件树之前调用，可在其中更新组件的状态变量以展示正确的内容，入参的类型与自定义组件的构造函数入参相同。
5.2 HarmonyOS NEXT应用性能诊断与优化：工具链、启动速度与功耗管理实战
陈奕昆的博客
06-06 1074
在HarmonyOS NEXT的全场景生态中，应用性能直接影响用户体验。通过专业的性能分析工具链、针对性的启动速度优化，以及精细化的功耗管理，开发者能够构建"秒级启动、持久流畅"的高质量应用。本文结合华为最新性能优化框架，解析核心技术实现与实战路径。
鸿蒙(HarmonyOS)实战开发篇——基于AVPlayer的视频播放
lc748258的博客
10-08 2152
AVPlayer：功能较完善的音视频播放ArkTS API，集成了流媒体和本地资源解析，媒体资源解封装，视频解码和渲染功能，适用于对媒体资源进行端到端播放的场景，可 直接播放mp4、mkv等格式的视频文件 。本示例就是使用avplayer进行视频播放的实现，功能包括多种方式播放视频，以及对于视频播放的控制。
鸿蒙Next导航与路由指南：组件导航与页面路由的完美协作
专注于移动开发的干货分享。提供高效解决方案、避坑指南与前沿技术解析。为开发者创造价值。
08-29 1126
Navigation是鸿蒙ArkUI的强交互型导航容器，专注于同级页面的布局管理与视觉导航（如Tab/分栏），需与Router协同实现完整路由能力3。对于同级页面切换（如底部Tab栏、侧边栏），优先使用Navigation组件。对于跨层级页面跳转（如首页→详情页），使用Router模块。在复杂项目中，可以混合使用两种方案：用Navigation处理整体导航结构，用Router处理特定页面跳转。
HarmonyOS元服务开发
leon_teacher
08-30 860
摘要 本文介绍了HarmonyOS元服务的概念、开发流程及实践指南。元服务是HarmonyOS提供的轻量级应用形态，具备免安装、即用即走的特点，与传统应用相比更高效。开发流程包括创建项目、开发页面/卡片/图标、打包测试和上架。重点演示了在AppGallery Connect创建元服务项目，并通过DevEco Studio开发的具体步骤，详细说明了元服务图标的生成规范和操作流程，包括图片尺寸、背景要求等设计规范。文中配有多个示意图直观展示元服务特性、开发工具界面和图标设计要点。
深入解析HarmonyOS：UIAbility与Page的生命周期协同
BDawn的专栏
08-30 915
在HarmonyOS应用开发中，理解UIAbility和Page的生命周期是构建高质量应用的关键。本文将深入探讨这两大核心概念的生命周期及其协同工作机制，帮助开发者更好地管理应用资源、优化用户体验。
鸿蒙服务端开发资料汇总
2502_93036221的博客
08-30 1015
鸿蒙操作系统采用分布式架构，支持跨设备协同工作，将不同设备整合为一个"超级设备"，实现资源共享和无缝体验。
鸿蒙NEXT表单选择组件详解：Radio与Checkbox的使用指南
最新发布
专注于移动开发的干货分享。提供高效解决方案、避坑指南与前沿技术解析。为开发者创造价值。
09-01 624
属性名类型描述selectboolean设置或获取复选框的选中状态，默认为falseColor设置复选框选中状态的颜色markstring设置复选框中的标记内容，默认为对勾符号groupstring设置复选框所属的组，同一组内的复选框可以进行联动Checkbox组件支持多种样式自定义，包括颜色、形状、边框等：5typescript@Entry@Componentbuild() {
鸿蒙NEXT布局全解析：从线性到瀑布流，构建自适应UI界面
专注于移动开发的干货分享。提供高效解决方案、避坑指南与前沿技术解析。为开发者创造价值。
08-30 1236
鸿蒙NEXT的布局容器就像是搭建UI的"万能积木"，6 通过组合这些积木，我们可以构建出既美观又功能强大的界面。容器类型布局方向典型应用场景Column垂直排列（主轴=Y轴）表单、纵向列表、信息卡片Row水平排列（主轴=X轴）导航栏、横向滚动、按钮组Grid二维网格（行+列）相册、商品展示、仪表盘7在实际开发中，选择合适的布局方式至关重要：6水平排列选Row：导航栏、图标组、水平菜单等。垂直排列选Column：列表项、表单、垂直菜单等。灵活布局用Flex：图文混排卡片、动态比例布局等。
鸿蒙NEXT开发指南：Image、Video与Swiper组件全面解析
专注于移动开发的干货分享。提供高效解决方案、避坑指南与前沿技术解析。为开发者创造价值。
09-01 675
可以使用自定义指示器替代默认指示器：6typescriptbuild() {Column() {// ...轮播内容.indicator(false) // 关闭默认指示器this.currentIndex = index // 监听页面变化})// 自定义指示器Row().zIndex(1).height(2).height(2)Image组件支持多种图片格式和数据源，满足各种场景下的图片显示需求。Video组件。
HarmonyOS权限管理应用
leon_teacher
08-29 882
华为系统权限管理机制分为系统授权(system_grant)和用户授权(user_grant)两类。系统授权如网络权限会在安装时自动授予，而用户授权如麦克风权限需动态申请。申请权限需在配置文件中声明，并通过AtManager进行动态授权检查和申请。每次执行敏感操作前都应检查权限状态，未授权时可引导用户到系统设置开启。开发者可封装工具类简化权限校验流程，确保应用合规访问敏感数据和功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

移动端开发者

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值